今日分享 JS动画之飞絮动画

  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)
    
    }