html全屏烟花表白特效代码

最近在网上发现了一款非常有趣的全屏烟花表白特效代码，使用的是HTML语言实现的，非常容易上手，现在分享给大家。

!DOCTYPE html>
    html>
    head>
        meta charset="utf-8">
        title>
    全屏烟花表白特效/title>
        style>
        body {
                background-color: black;
                font-family: 'Arial', sans-serif;
        }
        #love {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                text-align: center;
        }
        #fireworks {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                overflow: hidden;
                z-index: -1;
        }
        /style>
    /head>
    body>
        div id="love">
            h1>
    我爱你/h1>
            p>
    生日快乐！/p>
        /div>
        div id="fireworks">
    /div>
        script>
        function random(min, max) {
                return Math.floor(Math.random() * (max - min + 1) + min);
        }
        function createFirework() {
                var x = random(0, window.innerWidth);
                var y = random(0, window.innerHeight);
                var size = random(10, 20);
                var firework = document.createElement('div');
                firework.style.width = size + 'px';
                firework.style.height = size + 'px';
                firework.style.backgroundColor = 'rgb(' + random(0, 255) + ',' + random(0, 255) + ',' + random(0, 255) + ')';
                firework.style.borderRadius = '50%';
                firework.style.position = 'absolute';
                firework.style.top = y + 'px';
                firework.style.left = x + 'px';
                var animation = 'firework 1s ease-in-out forwards';
                firework.style.animation = animation;
            firework.addEventListener('animationend', function() {
                    firework.parentNode.removeChild(firework);
            }
    );
                document.getElementById('fireworks').appendChild(firework);
        }
            setInterval(createFirework, 500);
        /script>
    /body>
    /html>
    

代码中使用了CSS实现了文本居中和背景颜色的设置。在JavaScript中，定义了三个函数，分别是random()用于随机数生成，createFirework()用于创建烟花，setInterval()用于每隔0.5秒创建一枚烟花。通过监听animationend事件，在动画完成后删除该元素。

最后通过将创建的烟花的div元素添加到id为fireworks的div容器中，实现了全屏烟花表白特效。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！