love.html

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>熙熙在幹嘛</title>
<style>
    body, html {
        height: 100%;
        margin: 0;
        background-color: black;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #fireworkCanvas {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
    }
    a {
        color: white;
        font-size: 24px;
        text-decoration: none;
    }
</style>
</head>
<body>
<a href="#" onclick="showFireworks()">熙熙在幹嘛</a>
<canvas id="fireworkCanvas"></canvas>
<script>
    const canvas = document.getElementById('fireworkCanvas');
    const ctx = canvas.getContext('2d');
    let fireworks = [];

    function resizeCanvas() {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
    }

    function showFireworks() {
        document.querySelector('a').style.display = 'none';
        canvas.style.display = 'block';
        resizeCanvas();
        if (!fireworks.length) {
            for (let y = 1.5; y > -1.5; y -= 0.1) {
                for (let x = -1.5; x < 1.5; x += 0.05) {
                    let z = x * x + y * y - 1;
                    let f = z * z * z - x * x * y * y * y;
                    if (f <= 0) {
                        fireworks.push(new Firework(x * 100 + canvas.width / 2, -y * 100 + canvas.height / 2));
                    }
                }
            }
        }
        animate();
    }

    class Firework {
        constructor(x, y) {
            this.x = x;
            this.y = y;
            this.radius = Math.random() * 10 + 5;
            this.color = 'red';
            this.opacity = 1;
        }

        draw() {
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
            ctx.fillStyle = `rgba(255, 0, 0, ${this.opacity})`;
            ctx.fill();
        }

        update() {
            this.opacity -= 0.01;
            if (this.opacity < 0) {
                this.opacity = 0;
            }
        }
    }

    function animate() {
        requestAnimationFrame(animate);
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        fireworks.forEach(firework => {
            firework.update();
            firework.draw();
        });
    }

    window.addEventListener('resize', resizeCanvas);
</script>
</body>
</html>