小玩意生日快乐

html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生日快乐 🎂</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background: linear-gradient(135deg, #fef9f0, #fef5f0, #fdf2f0, #fef9f0);
            font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }

        /* ===== 标题区 ===== */
        .hero-text {
            z-index: 200;
            text-align: center;
            margin-bottom: 20px;
            pointer-events: none;
        }

        .hero-text h1 {
            font-size: 48px;
            font-weight: 900;
            color: #4a4a4a;
            letter-spacing: 6px;
            margin: 0 0 6px;
            text-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
        }

        .hero-text .sub {
            font-size: 16px;
            color: #b0a090;
            letter-spacing: 3px;
        }

        /* 画布 */
        #canvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 60;
        }

        #bg-canvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 10;
        }

        /* 开始按钮 */
        #start-btn {
            padding: 22px 60px;
            font-size: 28px;
            font-weight: bold;
            background: linear-gradient(135deg, #f0a8a0, #f5c8b0, #e8c8b8);
            color: #fff;
            border: none;
            border-radius: 60px;
            cursor: pointer;
            box-shadow: 0 15px 35px rgba(200, 150, 130, 0.35);
            z-index: 1000;
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            letter-spacing: 2px;
        }

        #start-btn:hover {
            transform: scale(1.12);
            box-shadow: 0 20px 45px rgba(200, 150, 130, 0.45);
        }

        /* 弹窗卡片 */
        .popup {
            position: absolute;
            width: 260px;
            min-height: 90px;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            display: flex;
            flex-direction: column;
            padding: 18px 16px 14px;
            z-index: 100;
            pointer-events: none;
            animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        @keyframes popIn {
            0% {
                transform: scale(0) rotate(-15deg);
                opacity: 0;
            }

            100% {
                transform: scale(1) rotate(0deg);
                opacity: 1;
            }
        }

        @keyframes fadeOut {
            to {
                opacity: 0;
                transform: scale(0.5) translateY(-50px);
            }
        }

        .popup .label {
            font-size: 11px;
            color: rgba(0, 0, 0, 0.35);
            font-weight: bold;
            letter-spacing: 2px;
            margin-bottom: 6px;
        }

        .popup .tip {
            font-size: 20px;
            font-weight: 800;
            text-align: center;
            flex-grow: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #3a3a3a;
            line-height: 1.5;
            letter-spacing: 1px;
        }

        /* 响应式 */
        @media (max-width: 600px) {
            .hero-text h1 {
                font-size: 34px;
                letter-spacing: 3px;
            }

            #start-btn {
                padding: 18px 44px;
                font-size: 22px;
            }

            .popup {
                width: 220px;
            }

            .popup .tip {
                font-size: 17px;
            }
        }
    </style>
</head>

<body>

    <canvas id="bg-canvas"></canvas>
    <canvas id="canvas"></canvas>

    <div class="hero-text">
        <h1>🎂 生日快乐</h1>
        <p class="sub">愿你每天都闪闪发光 ✨</p>
    </div>
    <button id="start-btn">点亮今天的惊喜 🎁</button>

    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        const bgCanvas = document.getElementById('bg-canvas');
        const bgCtx = bgCanvas.getContext('2d');
        const startBtn = document.getElementById('start-btn');

        // 柔和清新配色
        const COLORS = [
            '#FDF2F0', '#FEF9F0', '#F2F7F1', '#F0F5F9', '#F6F3F8',
            '#FDE8E4', '#FEF5E8', '#E8F3EB', '#E5EEF5', '#EDE7F2',
            '#F9E4DC', '#FDF0DC', '#DCF0E0', '#DCE8F0', '#E8DCF0'
        ];

        // 🌸 生日温馨小贴士
        const TIPS = [
            // ===== 心情 · 快乐 =====
            "😄 笑口常开",
            "🌈 天天开心\n无忧无虑",
            "🧿 天天好心情",
            "🤗 豁达开朗\n笑对每一天",
            "🍃 心旷神怡\n神采飞扬",
            "🥰 愿你的笑容\n永远灿烂如初",

            // ===== 心愿 · 前程 =====
            "🌟 梦想成真",
            "📚 金榜提名\n前程似锦",
            "🌊 顺顺利利\n万事胜意",
            "🤞 平安顺遂\n百事皆宜",
            "✨ 每一天\n都闪闪发光",
            "🌺 花开满路\n温柔以待",

            // ===== 身体 · 健康 =====
            "💪 身体安康\n精力充沛每一天",
            "🏃 强身健体\n百病不侵",
            "🛡️ 免疫力满分\n身体棒棒哒",
            "😴 睡眠充足\n精神满满",
            "🌸 记得多喝水\n皮肤水嫩嫩",
            "🍎 记得吃水果\n补充维生素C",
            "🧣 天冷多穿衣服\n别着凉了",
            "⚡ 元气满满\n活力一整天",
            "🛌 早点休息\n别熬夜了",
            "🌙 每个夜晚\n都有好梦",
            "🍃 按时吃饭",

            // ===== 生活 · 关系 =====
            "💖 好好爱自己\n温暖全世界",
            "👫 友谊长存",
            "📖 偶尔看看书\n给灵魂充充电",
            "🌿 周末出去走走\n呼吸新鲜空气",
            "🍰 今天你是主角\n开心最重要",
            "🌻 永远向阳生长",

        ];

        let particles = [];
        let bgEmojis = [];

        // ===== 粒子类：弹窗炸开的彩带 =====
        class Particle {
            constructor(x, y) {
                this.x = x; this.y = y;
                this.size = Math.random() * 8 + 4;
                this.speedX = (Math.random() - 0.5) * 14;
                this.speedY = (Math.random() - 0.5) * 14;
                this.color = COLORS[Math.floor(Math.random() * COLORS.length)];
                this.gravity = 0.25;
                this.life = 1.0;
            }
            update() {
                this.speedY += this.gravity;
                this.x += this.speedX; this.y += this.speedY;
                this.life -= 0.015;
            }
            draw() {
                ctx.globalAlpha = this.life;
                ctx.fillStyle = this.color;
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                ctx.fill();
                ctx.globalAlpha = 1;
            }
        }

        // ===== 背景飘落 emoji（🌸✨🌟💫🎀） =====
        const BG_EMOJIS = ['🌸', '✨', '🌟', '💫', '🎀', '🌷', '🍀', '💖', '🌈', '🦋', '☀️', '🌻', '🍃', '🎈', '💪', '🧸'];
        class BgEmoji {
            constructor() {
                this.reset();
                // 初始散落在屏幕各处
                this.y = Math.random() * bgCanvas.height;
            }
            reset() {
                this.x = Math.random() * bgCanvas.width;
                this.y = -40;
                this.size = Math.random() * 18 + 16;
                this.speedY = Math.random() * 0.7 + 0.4;
                this.angle = Math.random() * Math.PI * 2;
                this.emoji = BG_EMOJIS[Math.floor(Math.random() * BG_EMOJIS.length)];
                this.opacity = Math.random() * 0.12 + 0.06;
            }
            update() {
                this.y += this.speedY;
                this.x += Math.sin(this.angle) * 0.4;
                this.angle += 0.015;
                if (this.y > bgCanvas.height + 40) this.reset();
            }
            draw() {
                bgCtx.globalAlpha = this.opacity;
                bgCtx.font = `${this.size}px "Microsoft YaHei"`;
                bgCtx.fillText(this.emoji, this.x, this.y);
                bgCtx.globalAlpha = 1;
            }
        }

        function resize() {
            canvas.width = bgCanvas.width = window.innerWidth;
            canvas.height = bgCanvas.height = window.innerHeight;
        }
        window.addEventListener('resize', resize);
        resize();

        // ===== 动画循环 =====
        function animate() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            particles = particles.filter(p => p.life > 0);
            particles.forEach(p => { p.update(); p.draw(); });

            bgCtx.clearRect(0, 0, bgCanvas.width, bgCanvas.height);
            bgEmojis.forEach(e => { e.update(); e.draw(); });

            requestAnimationFrame(animate);
        }

        // ===== 创建弹窗卡片 =====
        function createPopup() {
            const x = Math.random() * (window.innerWidth - 300) + 30;
            const y = Math.random() * (window.innerHeight - 160) + 30;

            // 爆炸粒子
            for (let i = 0; i < 25; i++) particles.push(new Particle(x + 130, y + 55));

            const bgColor = COLORS[Math.floor(Math.random() * COLORS.length)];
            const tip = TIPS[Math.floor(Math.random() * TIPS.length)];

            const popup = document.createElement('div');
            popup.className = 'popup';
            popup.style.backgroundColor = bgColor;
            popup.style.left = `${x}px`;
            popup.style.top = `${y}px`;
            popup.innerHTML = `
                <div class="label">💌 温馨提示</div>
                <div class="tip">${tip.replace(/\n/g, '<br>')}</div>
            `;

            document.body.appendChild(popup);

            setTimeout(() => {
                popup.style.animation = 'fadeOut 0.6s forwards';
                setTimeout(() => popup.remove(), 600);
            }, 5500);
        }

        // ===== 开始体验 =====
        async function startExperience() {
            startBtn.style.display = 'none';

            // 隐藏标题区
            const hero = document.querySelector('.hero-text');
            if (hero) hero.style.transition = 'opacity 0.8s ease';
            if (hero) hero.style.opacity = '0';

            // 初始化背景飘落元素
            for (let i = 0; i < 80; i++) bgEmojis.push(new BgEmoji());

            animate();

            // 弹窗节奏：慢 → 快 → 密集
            for (let i = 0; i < 300; i++) {
                createPopup();
                let delay = 150;
                if (i < 10) delay = 260;
                else if (i < 40) delay = 170;
                else if (i < 100) delay = 120;
                else delay = 90;
                await new Promise(r => setTimeout(r, delay));
            }
        }

        startBtn.onclick = startExperience;
    </script>

</body>

</html>
小玩意 生日快乐

小玩意生日快乐
