javascript - 边框效果就像 Windows 10 中的 css3/html5

Question

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

border effect on mouse nearby

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>

这可以让人产生它正在点亮的错觉。但是，我找不到一种方法让它不显示在文档中，只显示在表格中。希望这会有所帮助