七夕表白必备源码

AI摘要
七夕表白必备源码，包含星空背景、打字机效果和爱心动画，可自定义文案。
code here...<!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>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            background: #000;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }
        /* 星空背景 */
        .stars {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }
        /* 表白文案容器 */
        .text-box {
            position: relative;
            z-index: 2;
            color: #fff;
            font-size: 24px;
            font-family: "微软雅黑";
            padding: 20px 40px;
            border: 2px solid #ff69b4;
            border-radius: 10px;
            background: rgba(0,0,0,0.5);
            box-shadow: 0 0 20px #ff69b4;
        }
        /* 打字机效果 */
        .typing {
            overflow: hidden;
            white-space: nowrap;
            border-right: 3px solid #ff69b4;
            animation: typing 5s steps(50) 1s 1 normal both, blink 0.5s infinite;
        }
        /* 爱心动画 */
        .heart {
            position: absolute;
            color: #ff69b4;
            font-size: 20px;
            animation: float 3s infinite ease-in-out;
            opacity: 0;
        }
        /* 动画定义 */
        @keyframes typing {
            from { width: 0; }
            to { width: 100%; }
        }
        @keyframes blink {
            from { border-color: transparent; }
            to { border-color: #ff69b4; }
        }
        @keyframes float {
            0% {
                transform: translateY(0);
                opacity: 0.8;
            }
            50% {
                transform: translateY(-20px);
                opacity: 1;
            }
            100% {
                transform: translateY(0);
                opacity: 0.8;
            }
        }
    </style>
</head>
<body>
    <div class="stars" id="stars"></div>
    <div class="text-box">
        <div class="typing" id="loveText">我喜欢你，不止一点点✨</div>
    </div>

    <script>
        // 自定义表白文案（改这里！）
        const loveWords = "我喜欢你，不止一点点✨";
        document.getElementById("loveText").textContent = loveWords;

        // 生成星空
        function createStars() {
            const stars = document.getElementById("stars");
            for (let i = 0; i < 100; i++) {
                const star = document.createElement("div");
                star.style.position = "absolute";
                star.style.left = `${Math.random() * 100}%`;
                star.style.top = `${Math.random() * 100}%`;
                star.style.width = `${Math.random() * 3 + 1}px`;
                star.style.height = star.style.width;
                star.style.background = "#fff";
                star.style.borderRadius = "50%";
                star.style.opacity = Math.random();
                star.style.animation = `twinkle ${Math.random() * 3 + 2}s infinite`;
                stars.appendChild(star);
            }
        }

        // 生成爱心
        function createHearts() {
            setInterval(() => {
                const heart = document.createElement("div");
                heart.className = "heart";
                heart.textContent = "❤️";
                heart.style.left = `${Math.random() * 100}%`;
                heart.style.top = `${Math.random() * 100}%`;
                heart.style.animationDelay = `${Math.random() * 2}s`;
                document.body.appendChild(heart);
                // 3秒后移除爱心
                setTimeout(() => {
                    heart.remove();
                }, 3000);
            }, 500);
        }

        // 添加闪烁动画
        const style = document.createElement("style");
        style.textContent = `
            @keyframes twinkle {
                0% { opacity: 0; }
                50% { opacity: 1; }
                100% { opacity: 0; }
            }
        `;
        document.head.appendChild(style);

        // 初始化
        createStars();
        createHearts();
    </script>
</body>
</html>