эффект границы как в Windows 10 с css3 / html5

Question

Я хотел бы создать этот эффект в html5.У кого-нибудь есть идея, если и как это возможно?

эффект границы на мышь рядом

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>

Это может создать иллюзию, что она загорается.Однако я не могу найти способ сделать так, чтобы это не отображалось в документе, а только в таблице.Надеюсь, это поможет немного