html代码表白烟花特效：浪漫表白，用HTML代码打造烟花特效

来源：网络作者：日期：2025-11-02 19:26:15

在特殊的日子向心爱的人表白,是每个人都会经历的美好时刻，除了手写情书或精心准备的礼物，现在你可以用代码创造一个特别的表白方式——使用HTML和JavaScript创建绚丽的烟花特效，让表白更加难忘。

下面是一个简单但效果惊艳的HTML代码表白烟花特效教程,即使没有编程基础也能轻松上手：

<!DOCTYPE html>
<html>
<head>给<font color="red">[她的名字]</font>的表白</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #000;
            overflow: hidden;
            font-family: 'Arial', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            flex-direction: column;
        }
        .message {
            color: white;
            font-size: 24px;
            text-align: center;
            margin-bottom: 20px;
            text-shadow: 0 0 10px rgba(255,255,255,0.8);
        }
        .heart {
            color: #ff3366;
            font-size: 40px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="heart">❤</div>
    <div class="message">亲爱的<font color="red">[她的名字]</font>：</div>
    <div class="message">遇见你是我生命中最美好的意外...</div>
    <div class="message">我喜欢你很久了，希望能有你的陪伴</div>
    <div class="message">—— 来自<font color="red">你的名字</font></div>
    <script>
        // 烟花特效代码
        class Firework {
            constructor() {
                this.canvas = document.createElement('canvas');
                this.canvas.width = window.innerWidth;
                this.canvas.height = window.innerHeight;
                this.ctx = this.canvas.getContext('2d');
                document.body.appendChild(this.canvas);
                this.particles = [];
                this.fireworks = [];
                this.colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
                this.mouseX = 0;
                this.mouseY = 0;
                window.addEventListener('mousemove', (e) => {
                    this.mouseX = e.clientX;
                    this.mouseY = e.clientY;
                });
                this.animate();
            }
            createFirework(x, y) {
                const angle = Math.atan2(this.mouseY - y, this.mouseX - x);
                const speed = 8;
                const size = Math.random() * 3 + 2;
                const color = this.colors[Math.floor(Math.random() * this.colors.length)];
                const particle = {
                    x: x,
                    y: y,
                    vx: Math.cos(angle) * speed,
                    vy: Math.sin(angle) * speed,
                    radius: size,
                    color: color,
                    alpha: 1,
                    decay: 0.02 + Math.random() * 0.01
                };
                this.particles.push(particle);
            }
            update() {
                // 创建新烟花
                if (Math.random() < 0.05) {
                    this.createFirework(
                        Math.random() * this.canvas.width,
                        this.canvas.height
                    );
                }
                // 更新粒子
                for (let i = this.particles.length - 1; i >= 0; i--) {
                    const p = this.particles[i];
                    p.x += p.vx;
                    p.y += p.vy;
                    p.vy += 0.05; // 重力效果
                    p.alpha -= p.decay;
                    if (p.alpha <= 0) {
                        this.particles.splice(i, 1);
                    }
                }
            }
            draw() {
                this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
                // 绘制粒子
                for (const p of this.particles) {
                    this.ctx.beginPath();
                    this.ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
                    this.ctx.fillStyle = `${p.color}${Math.floor(p.alpha * 255).toString(16).padStart(2, '0')}`;
                    this.ctx.fill();
                }
            }
            animate() {
                this.update();
                this.draw();
                requestAnimationFrame(() => this.animate());
            }
        }
        // 页面加载完成后启动烟花
        window.onload = () => {
            const firework = new Firework();
            // 添加点击事件，点击位置产生烟花
            document.addEventListener('click', (e) => {
                for (let i = 0; i < 5; i++) {
                    firework.createFirework(e.clientX, e.clientY);
                }
            });
        };
    </script>
</body>
</html>