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

1

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

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

Теги:
border
effect

1 ответ

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>

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню