html代码烟花特效

作者：戮尽逆者发布日期:2025-06-20 浏览:72

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML代码烟花特效</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background: black;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="fireworks"></canvas>
    <script>
        // JavaScript代码实现烟花特效
        const canvas = document.getElementById('fireworks');
        const ctx = canvas.getContext('2d');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        class Firework {
            constructor(x, y) {
                this.x = x;
                this.y = y;
                this.color = `hsl(${Math.random() * 360}, 100%, 50%)`;
                this.particles = [];
                for (let i = 0; i < 100; i++) {
                    this.particles.push({
                        x: this.x,
                        y: this.y,
                        velocity: {
                            x: (Math.random() - 0.5) * 10,
                            y: (Math.random() - 0.5) * 10
                        },
                        opacity: Math.random()
                    });
                }
            }

            update() {
                this.particles.forEach(particle => {
                    particle.x += particle.velocity.x;
                    particle.y += particle.velocity.y;
                    particle.opacity -= 0.01;
                });
                this.particles = this.particles.filter(particle => particle.opacity > 0);
            }

            draw() {
                this.particles.forEach(particle => {
                    ctx.beginPath();
                    ctx.arc(particle.x, particle.y, 2, 0, Math.PI * 2);
                    ctx.fillStyle = this.color;
                    ctx.globalAlpha = particle.opacity;
                    ctx.fill();
                    ctx.closePath();
                });
            }
        }

        let fireworks = [];

        function animate() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            fireworks.forEach(firework => {
                firework.update();
                firework.draw();
            });
            fireworks = fireworks.filter(firework => firework.particles.length > 0);
            requestAnimationFrame(animate);
        }

        function spawnFirework() {
            const x = Math.random() * canvas.width;
            const y = Math.random() * canvas.height;
            fireworks.push(new Firework(x, y));
        }

        setInterval(spawnFirework, 1000);

        animate();
    </script>
</body>
</html>

解释说明：

HTML结构：创建了一个<canvas>元素用于绘制烟花效果。
CSS样式：设置了页面背景为黑色，并隐藏了滚动条。
JavaScript逻辑：
- 定义了一个Firework类，用于生成烟花粒子并控制其运动和渲染。
- 使用requestAnimationFrame进行动画循环，不断更新和绘制烟花。
- 每隔一秒随机生成一个新的烟花实例，模拟烟花绽放的效果。

上一篇：css文件怎么引入html文件

下一篇：根据图片生成html