鼠标点击烟花绽放特效

HTML:

    <div class="cb"></div>

CSS:

        body,
        html {
            background: linear-gradient(6deg, #214, #000);
            height: 100%;
            overflow: hidden;
        }

        @keyframes donghua {
            0% {box-shadow: 0 0 0px #fff}
            100% {box-shadow: 0 0 10px #fff}
            0% {box-shadow: 0 0 0px #fff}
        }
        .cb{background-image: url(11.png); position: fixed; bottom: -16px; left: calc(50% - 100px); width: 200px; height: 200px;}

JS:

        //月亮
        let yl = document.createElement('div')
        yl.style.width = '50px'
        yl.style.height = '50px'
        yl.style.position = 'fixed'
        yl.style.top = '10%'
        yl.style.left = '10%'
        yl.style.background = 'rgba(255, 255, 0, 0.8)'
        yl.style.borderRadius = '50%'
        document.body.appendChild(yl)

        //星星
        let n = 100;
        for (let i = 0; i < n; i++) {
            let a = Math.round(Math.random() * innerWidth)
            let b = Math.round(Math.random() * innerHeight / 2)
            let oDiv = document.createElement('div')
            oDiv.style.width = '3px'
            oDiv.style.height = '3px'
            oDiv.style.borderRadius = '50%'
            oDiv.style.animation = 'donghua 0.5s infinite linear'
            oDiv.style.position = 'absolute'
            oDiv.style.top = b + 'px'
            oDiv.style.left = a + 'px'
            oDiv.style.background = '#fff'
            document.body.appendChild(oDiv)
        }

        //烟花
        document.onclick = function (e) {
            let x = e.clientX;
            let y = e.clientY;
            let w = document.body.offsetWidth;
            let h = document.body.offsetHeight;
            yanhua(x, y, w, h);
        }
        function yanhua(x, y, w, h) {
            let Ddiv = document.createElement('div');
            Ddiv.style.width = '4px';
            Ddiv.style.height = '8px';
            Ddiv.style.position = 'absolute'
            Ddiv.style.left = x - 5 + 'px';
            Ddiv.style.top = h - 20 + 'px';
            Ddiv.style.background = '#ff3300'
            document.body.appendChild(Ddiv);

            let sd = 10;
            let ss = setInterval(function () {
                if (Ddiv.offsetTop < y) {
                    document.body.removeChild(Ddiv);
                    clearInterval(ss);
                    baozha(x, y, w, h)
                }
                Ddiv.style.top = Ddiv.offsetTop - sd + "px";
            }, 1000 / 60)
        };


        function baozha(x, y, w, h) {
            let bz = [];
            let lz = 80;
            for (let i = 0; i < lz; i++) {
                let bzx = Math.round(Math.random() * 40) - 20;
                let bzy = Math.round(Math.random() * 40) - 20;
                bz[i] = document.createElement('div')
                bz[i].style.width = '2px';
                bz[i].style.height = '2px';
                bz[i].style.background = '#ffff00'
                bz[i].style.top = y + bzy + 'px'
                bz[i].style.left = x + bzx + 'px'
                bz[i].style.position = "absolute"
                bz[i].bzxx = Math.round(Math.random() * 20) - 10;
                bz[i].bzyy = Math.round(Math.random() * 20) - 10;
                document.body.appendChild(bz[i])
            }
            let s = 0
            setInterval(function () {
                for (let i = 0; i < lz; i++) {
                    s++;
                    if (s < 1500) {
                        // if (bz[i].offsetTop < 0 || bz[i].offsetTop > h || bz[i].offsetLeft < 0 || bz[i].offsetLeft > w) {
                        //     document.body.removeChild(bz[i])
                        // } else {
                        bz[i].style.top = bz[i].offsetTop + bz[i].bzyy + 'px';
                        bz[i].style.left = bz[i].offsetLeft + bz[i].bzxx + 'px';
                        bz[i].bzyy++;
                        // }
                    } else {
                        for (let i = 0; i < lz; i++) {
                            document.body.removeChild(bz[i])
                        }
                    }
                }
            }, 1000 / 60)
        }