样式
body {
background-color: #100F0F;
}
.box {
text-align: center;
}
span {
display: inline-block;
width: 20px;
height: 20px;
background-color: #181819;
margin: 3px;
transition: all 1s;
box-shadow: 0;
}
js
<body>
<div class="big-box"></div>
<script>
function createBox() {
let box = document.createElement('div');
box.classList.add('box');
document.body.appendChild(box);
}
for (let i = 1; i <= 25; i++) {
createBox()
}
let boxList = document.querySelectorAll('.box')
let html = '';
for (let i = 0; i < boxList.length; i++) {
for (let j = 1; j <= 20; j++) {
html += `<span></span>`;
}
boxList[i].innerHTML = html;
html = '';
}
function random(x) {
return Math.floor(Math.random() * (x + 1));
}
document.onmousemove = function(e) {
if (e.target.tagName === 'SPAN') {
e.target.style.boxShadow = `rgb(${random(255)},${random(255)},${random(255)})` + ' 0 0 20px ';
console.log(e.target.style.boxShow);
e.target.style.backgroundColor = `rgb(${random(255)},${random(255)},${random(255)})`;
e.target.ontransitionend = function() {
e.target.style.backgroundColor = '#181819';
e.target.style.boxShadow = 'none';
}
}
}
</script>
</body>