javascript - 边框效果就像在带有 css3 / html5 的 Windows 10 中一样

Question

我想在 html5 中创建这种效果。有谁知道这是否以及如何可能？

附近鼠标的边框效果

标签： javascripthtmlcssbordereffect

Answer 1

document.onmousemove = function(event) {
    var x = event.clientX - 100, y = event.clientY - 100;
    var div = document.createElement("div");
    div.id = "light";
    div.style.cssText += "left: " + x + "px; top: " + y + "px;";
    if (document.getElementById("light")) {
        document.body.removeChild(document.getElementById("light"));
    }
    document.body.appendChild(div);
};

td {
    border: 1px solid black;
    width: 100px;
    height: 100px;
    text-align: center;
    background: lightgray;
    position: relative;
    z-index: 2;
}

table {
    background: #505050;   
}

#light {
    background: radial-gradient(white, #111111); 
    z-index: 1; 
    width: 200px; 
    height: 200px; 
    border-radius: 50%; 
    position: fixed; 
}

<table>
<tbody>
<tr>
<td>Box 1</td>
<td>Box 2</td>
<td>Box 3</td>
</tr>
<tr>
<td>Box 4</td>
<td>Box 5</td>
<td>Box 6</td>
</tr>
</tbody>
</table>

这会让人产生它正在发光的错觉。但是，我找不到让它不显示在文档上的方法，只显示在桌子上。希望这个对你有帮助