网页版满屏爱心♥之前有发过python版的满屏爱心，python是以小窗口的形式弹出，需要手动关闭；HTML版是一个一个

之前有发过python版的满屏爱心，python是以小窗口的形式弹出，需要手动关闭；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>
        /* 弹窗样式 */
        .popup {
            position: fixed;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            font-family: "楷体", "KaiTi", serif;
            font-size: 18px;
            text-align: center;
            z-index: 1000;
            animation: fadeIn 0.5s ease-out, fadeOut 0.5s ease-in 4.5s forwards;
            max-width: 220px;
            word-wrap: break-word;
            opacity: 0;
        }

        /* 淡入淡出动画 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes fadeOut {
            from { opacity: 1; transform: translateY(0); }
            to { opacity: 0; transform: translateY(-10px); }
        }

        /* 页面背景改为淡粉色（柔和不刺眼） */
        body {
            margin: 0;
            padding: 0;
            min-height: 100vh;
            background-color: #ffe6f2; /* 淡粉色，比 purepink 更柔和 */
        }
    </style>
</head>
<body>
    <script>
        // 定义多种背景颜色（与原Python一致）
        const bgColors = ['pink', 'lightblue', 'lightgreen', 'lightyellow', 'lightpink', 'cyan', 'lavender'];
        
        // 定义不同的消息内容（与原Python一致）
        const messages = [
            '岁岁无忧!',
            '生辰喜乐!',
            '顺遂长安!',
            '岁岁平安!',
            '永远被爱包围!',
            '永远的幸福!',
            '愿你平安健康!',
            '愿你事事顺心!',
            '愿你永远保持心里的光!'
        ];

        // 生成随机位置
        function getRandomPosition() {
            const width = window.innerWidth;
            const height = window.innerHeight;
            // 确保弹窗不会超出屏幕
            const x = Math.floor(Math.random() * (width - 240)); // 240 = 弹窗宽度 + 内边距
            const y = Math.floor(Math.random() * (height - 120)); // 120 = 弹窗高度 + 内边距
            return { x, y };
        }

        // 创建单个弹窗
        function createPopup(msg) {
            const popup = document.createElement('div');
            popup.className = 'popup';
            
            // 设置内容、背景色和位置
            popup.textContent = msg;
            popup.style.backgroundColor = bgColors[Math.floor(Math.random() * bgColors.length)];
            const { x, y } = getRandomPosition();
            popup.style.left = `${x}px`;
            popup.style.top = `${y}px`;

            // 添加到页面
            document.body.appendChild(popup);

            // 5秒后移除弹窗（避免内存占用）
            setTimeout(() => {
                popup.remove();
            }, 5000);
        }

        // 批量创建弹窗（模拟线程延迟效果）
        function createPopupsBatch(count = 500, delay = 50) {
            let index = 0;
            const interval = setInterval(() => {
                if (index >= count) {
                    clearInterval(interval);
                    return;
                }
                // 随机选择消息
                const randomMsg = messages[Math.floor(Math.random() * messages.length)];
                createPopup(randomMsg);
                index++;
            }, delay);
        }

        // 页面加载完成后开始创建弹窗
        window.addEventListener('load', () => {
            // 创建500个弹窗，每个间隔50毫秒（与原Python一致）
            createPopupsBatch(500, 50);
        });
    </script>
</body>
</html>