body {
background-color: black;
}
div {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: blueviolet;
position: absolute;
}
//CSS部分
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
HTML部分
//JS部分
<script>
var divList = document.querySelectorAll('div')
var timer =null
function random(max, min) {
return Math.floor(Math.random() * (max - min + 1) + min)
}
function color() {
return `rgb(${random(0, 255)},${random(0, 255)},${random(0, 255)})`
}
document.onmousemove = function () {
var num = 0
var e = event || window.event
var timer = setInterval(function () {
divList[num].style.left = e.clientX - divList[0].offsetWidth / 2 + 'px'
divList[num].style.top = e.clientY - divList[0].offsetHeight / 2 + 'px'
divList[num].style.background = color()
divList[num].style.display = 'block'
num++
if (num >= divList.length) {
clearInterval(timer)
}
} , 10)
}