HTML&CSS&JS：抖音爆火的满屏“关心弹幕”酷炫卡片，已经帮你打包好了，快来体验吧！

最近刷抖音，被那种满屏"关心弹幕"的酷炫卡片效果刷屏了？我也做了一个！安排！已经帮你打包好了！

0 基础也能玩：

1️⃣ 把代码粘进浏览器，一秒出效果；

2️⃣ 懒得折腾？戳下面 exe，下载双击全屏告白，桌面级浪漫瞬间拉满。

快把这份专属惊喜发给 TA，今晚就让它替你说心里话！

大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。

演示效果

体验地址

下载地址如下，下载完成双击满屏关心.exe

mp-779f4133-ea71-4a67-b4af-8cecfd13e8e1.cdn.bspapp.com/满屏关心.exe

实现思路：将 index.html 文件使用 python 打包成 exe 可执行程序

HTML&CSS

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>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Helvetica Neue', Arial, sans-serif;
            background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
            color: #fff;
            min-height: 100vh;
            overflow: hidden;
            position: relative;
        }

        .title {
            text-align: center;
            padding: 20px;
            background: rgba(0, 0, 0, 0.3);
            margin-bottom: 20px;
            font-weight: 300;
            letter-spacing: 2px;
        }

        .container {
            position: relative;
            width: 100%;
            height: calc(100vh - 100px);
        }

        .card {
            position: absolute;
            padding: 15px 20px;
            border-radius: 12px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            font-weight: 500;
            line-height: 1.4;
            word-break: break-word;
            transition: transform 0.3s ease;
            opacity: 0.9;
            right: -300px;
            /* 初始位置在屏幕右侧外 */
        }

        .card:hover {
            transform: scale(1.05);
            opacity: 1;
            z-index: 100;
        }

        /* 卡片样式变体 */
        .card-style-1 {
            background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
            color: #7d3c4d;
            transform: rotate(-3deg);
        }

        .card-style-2 {
            background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);
            color: #2c3e50;
            transform: rotate(2deg);
        }

        .card-style-3 {
            background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
            color: #1a535c;
            transform: rotate(-1deg);
        }

        .card-style-4 {
            background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
            color: #6d4c41;
            transform: rotate(4deg);
        }

        .card-style-5 {
            background: linear-gradient(135deg, #d4fc79 0%, #96e6a1 100%);
            color: #2e7d32;
            transform: rotate(-2deg);
        }

        .card-style-6 {
            background: linear-gradient(135deg, #a6c0fe 0%, #f68084 100%);
            color: #4527a0;
            transform: rotate(1deg);
        }

        .card-style-7 {
            background: linear-gradient(135deg, #fccb90 0%, #d57eeb 100%);
            color: #6a1b9a;
            transform: rotate(-4deg);
        }

        .card-style-8 {
            background: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%);
            color: #283593;
            transform: rotate(3deg);
        }

        .card-large {
            width: 220px;
            padding: 25px;
            font-size: 18px;
        }

        .card-medium {
            width: 180px;
            padding: 20px;
            font-size: 16px;
        }

        .card-small {
            width: 150px;
            padding: 15px;
            font-size: 14px;
        }

        .stars {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }

        .star {
            position: absolute;
            background-color: white;
            border-radius: 50%;
            animation: twinkle 5s infinite;
        }

        @keyframes twinkle {

            0%,
            100% {
                opacity: 0.2;
            }

            50% {
                opacity: 1;
            }
        }

        .controls {
            position: fixed;
            bottom: 20px;
            left: 0;
            width: 100%;
            display: flex;
            justify-content: center;
            z-index: 1000;
        }

        .control-btn {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            color: white;
            font-size: 18px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(5px);
        }

        .control-btn:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: scale(1.1);
        }

        .info-panel {
            position: fixed;
            top: 20px;
            right: 20px;
            background: rgba(0, 0, 0, 0.5);
            padding: 15px;
            border-radius: 10px;
            font-size: 14px;
            backdrop-filter: blur(5px);
        }

        @keyframes moveLeft {
            0% {
                right: -300px;
                opacity: 0;
            }

            10% {
                opacity: 0.9;
            }

            90% {
                opacity: 0.9;
            }

            100% {
                right: 100%;
                opacity: 0;
            }
        }
    </style>
</head>

<body>
    <h1 class="title">流星雨关心卡片</h1>

    <div class="container" id="container">
        <!-- 星星背景 -->
        <div class="stars" id="stars"></div>
        <!-- 卡片将通过JavaScript动态生成 -->
    </div>

    <div class="controls">
        <button class="control-btn" id="pauseBtn">⏸️</button>
    </div>

    <div class="info-panel">
        已生成卡片: <span id="cardCount">0</span>
    </div>

    <script>
        // 关心语句数组（已增加更多语句）
        const caringMessages = [
            "天冷添衣，注意保暖",
            "记得按时吃饭，照顾好自己",
            "工作再忙，也要记得休息",
            "多喝热水，对身体好",
            "早点休息，别熬夜",
            "出门记得带伞，别淋雨",
            "心情不好时，记得找我聊聊",
            "注意安全，平安最重要",
            "累了就歇歇，别太勉强",
            "多吃水果，补充维生素",
            "保持微笑，你是最棒的",
            "记得运动，保持健康",
            "别给自己太大压力",
            "今天也要开心哦",
            "记得想我，我一直都在",
            "好好照顾自己，我会心疼",
            "别总吃外卖，对身体不好",
            "天气干燥，多喝水",
            "出门记得戴口罩",
            "睡前泡脚，睡得更好",
            "别总盯着屏幕，保护眼睛",
            "记得给家人打个电话",
            "对自己好一点",
            "你值得所有的美好",
            "愿你每天都有好心情",
            "困难只是暂时的，加油",
            "相信自己，你可以的",
            "别忘记微笑，它会让你更美",
            "每天都是新的开始",
            "你的努力终会有回报",
            "别担心，一切都会好起来",
            "记得奖励努力的自己",
            "世界因你而更美好",
            "你的存在让很多人幸福",
            "保持积极心态，好事自然来",
            "别太在意别人的眼光",
            "做自己喜欢的事",
            "学会放松，享受生活",
            "你的健康比什么都重要",
            "愿你被世界温柔以待",
            "每天进步一点点",
            "你是独一无二的",
            "坚持就是胜利",
            "感恩生活中的小确幸",
            "保持好奇心，探索世界",
            "学会宽容，放过自己",
            "你的笑容最有感染力",
            "勇敢追求自己的梦想",
            "别害怕失败，它是成功之母",
            "珍惜当下，享受此刻"
        ];

        // 卡片样式类名数组
        const cardStyles = [
            'card-style-1', 'card-style-2', 'card-style-3', 'card-style-4',
            'card-style-5', 'card-style-6', 'card-style-7', 'card-style-8'
        ];

        // 卡片大小类名数组
        const cardSizes = ['card-small', 'card-medium', 'card-large'];

        // 星星背景
        function createStars() {
            const starsContainer = document.getElementById('stars');
            const starCount = 100;

            for (let i = 0; i < starCount; i++) {
                const star = document.createElement('div');
                star.className = 'star';

                // 随机大小和位置
                const size = Math.random() * 3;
                star.style.width = `${size}px`;
                star.style.height = `${size}px`;
                star.style.left = `${Math.random() * 100}%`;
                star.style.top = `${Math.random() * 100}%`;

                // 随机动画延迟
                star.style.animationDelay = `${Math.random() * 5}s`;

                starsContainer.appendChild(star);
            }
        }

        // 卡片管理
        let cardCount = 0;
        let animationPaused = false;
        let cardGenerationInterval;

        // 创建新卡片
        function createCard() {
            if (animationPaused) return;

            const container = document.querySelector('.container');
            const card = document.createElement('div');
            card.className = 'card';

            // 随机选择样式
            const randomStyle = cardStyles[Math.floor(Math.random() * cardStyles.length)];
            card.classList.add(randomStyle);

            // 随机选择大小
            const randomSize = cardSizes[Math.floor(Math.random() * cardSizes.length)];
            card.classList.add(randomSize);

            // 随机选择关心语句
            const randomMessage = caringMessages[Math.floor(Math.random() * caringMessages.length)];
            card.textContent = randomMessage;

            // 随机垂直位置
            const maxTop = window.innerHeight - 150;
            const randomTop = Math.floor(Math.random() * maxTop);
            card.style.top = `${randomTop}px`;

            // 随机动画持续时间（加快速度：4-10秒）
            const duration = 8 + Math.random() * 6;
            card.style.animation = `moveLeft ${duration}s linear forwards`;

            // 添加到容器
            container.appendChild(card);

            // 更新卡片计数
            cardCount++;
            document.getElementById('cardCount').textContent = cardCount;

            // 动画结束后移除卡片
            setTimeout(() => {
                if (card.parentNode) {
                    card.parentNode.removeChild(card);
                }
            }, duration * 1000);
        }

        // 初始化
        function init() {
            createStars();

            // 开始生成卡片（加快生成速度：每800毫秒生成一个）
            cardGenerationInterval = setInterval(createCard, 800);

            // 控制按钮事件
            document.getElementById('pauseBtn').addEventListener('click', togglePause);

            // 初始快速生成几个卡片
            for (let i = 0; i < 5; i++) {
                setTimeout(() => createCard(), i * 200);
            }
        }

        // 暂停/继续动画
        function togglePause() {
            animationPaused = !animationPaused;
            const pauseBtn = document.getElementById('pauseBtn');

            if (animationPaused) {
                pauseBtn.textContent = '▶️';
                // 暂停所有卡片动画
                document.querySelectorAll('.card').forEach(card => {
                    card.style.animationPlayState = 'paused';
                });
            } else {
                pauseBtn.textContent = '⏸️';
                // 继续所有卡片动画
                document.querySelectorAll('.card').forEach(card => {
                    card.style.animationPlayState = 'running';
                });
            }
        }

        // 页面加载时初始化
        window.addEventListener('load', init);

        // 窗口大小改变时调整
        window.addEventListener('resize', () => {
            // 重新创建星星背景
            document.getElementById('stars').innerHTML = '';
            createStars();
        });
    </script>
</body>

</html>

HTML

title：页面标题 "流星雨关心卡片"：
container：核心容器。
stars：星空背景容器
star：星星元素，通过 CSS 动画实现 "闪烁" 效果，模拟夜空星星
controls：控制按钮容器。
control-btn：暂停 / 继续按钮，控制卡片流动与星空闪烁的暂停 / 继续。
info-panel：信息面板，显示已生成卡片数量（#cardCount），提供实时数据反馈。
card：关心卡片，包含关心语句。

CSS

.title：页面标题：text-align: center+padding: 20px，居中且与卡片区隔离；浅黑半透明背景（rgba(0,0,0,0.3)），降低背景干扰，突出标题；font-weight: 300（轻量）+letter-spacing: 2px，温馨不厚重。
.container：核心容器：height: calc(100vh - 100px)，减去标题（约 60px）与控制按钮（约 40px）高度，确保卡片在屏幕主体区域流动。
.card 关心卡片基础样式：定位：absolute，脱离文档流，便于从右向左绝对定位流动；内边距：15px 20px（基础），不同尺寸类会覆盖，确保文字不贴边；圆角 12px + 阴影（0 10px 20px rgba(0,0,0,0.3)），模拟立体卡片；布局：display: flex+align-items: center+justify-content: center+text-align: center，确保语句居中；文本：line-height: 1.4（行高）+word-break: break-word（换行），适配长语句；初始状态：right: -300px（屏幕右侧外）+opacity: 0，为流动动画做准备。
.card-size-x（3 种尺寸）卡片尺寸样式：宽度：小（150px）、中（180px）、大（220px），适配不同长度语句；内边距与字体：尺寸越大，内边距（25px/20px/15px）与字体（18px/16px/14px）越大，视觉比例协调。
.star 星星样式：形状：白色圆形（background-color: white+border-radius: 50%）；动画：绑定 twinkle 动画，实现 "闪烁" 效果，增强夜空真实感。
.star 星星样式：形状：白色圆形（background-color: white+border-radius: 50%）；动画：绑定 twinkle 动画，实现 "闪烁" 效果，增强夜空真实感。
.control-btn 控制按钮：形状：圆形（border-radius: 50%）、50×50px，便于点击；视觉：半透明白色背景（rgba(255,255,255,0.2)）+ 玻璃模糊（backdrop-filter: blur(5px)），与夜空背景融合；交互：transition: all 0.3s ease，hover 时背景加深（rgba(255,255,255,0.3)）+ 缩放（scale(1.1)），反馈明确。
.info-panel 信息面板：视觉：浅黑半透明背景（rgba(0,0,0,0.5)）+ 玻璃模糊 + 圆角 10px，不干扰主视觉；内边距：15px，字体 14px，简洁显示卡片计数。

JavaScript 逻辑解析

初始化与数据定义

javascript 复制代码

// 1. 关心语句数组：50条温馨语句，涵盖保暖、休息、情绪等场景，传递关心
const caringMessages = [
    "天冷添衣，注意保暖", "记得按时吃饭，照顾好自己", "工作再忙，也要记得休息",
    // ... 其余47条语句
];

// 2. 卡片样式/尺寸类名数组：用于随机分配，实现视觉差异化
const cardStyles = ['card-style-1', 'card-style-2', ..., 'card-style-8']; // 8种样式
const cardSizes = ['card-small', 'card-medium', 'card-large']; // 3种尺寸

// 3. 状态变量：卡片计数、动画暂停状态、卡片生成定时器
let cardCount = 0;
let animationPaused = false;
let cardGenerationInterval;

星空背景生成（createStars）动态生成随机大小、位置与闪烁延迟的星星，模拟夜空：

javascript 复制代码

function createStars() {
    const starsContainer = document.getElementById('stars');
    const starCount = 100; // 生成100颗星星

    for (let i = 0; i < starCount; i++) {
        const star = document.createElement('div');
        star.className = 'star';

        // 1. 随机大小（0-3px）
        const size = Math.random() * 3;
        star.style.width = `${size}px`;
        star.style.height = `${size}px`;

        // 2. 随机位置（屏幕内任意坐标）
        star.style.left = `${Math.random() * 100}%`;
        star.style.top = `${Math.random() * 100}%`;

        // 3. 随机动画延迟（0-5秒），避免所有星星同步闪烁
        star.style.animationDelay = `${Math.random() * 5}s`;

        starsContainer.appendChild(star);
    }
}

关心卡片生成与流动（createCard）核心函数，动态生成卡片并添加流动动画，动画结束后自动移除：

javascript 复制代码

function createCard() {
    if (animationPaused) return; // 暂停状态下不生成新卡片

    const container = document.querySelector('.container');
    const card = document.createElement('div');
    card.className = 'card';

    // 1. 随机分配样式（色彩+旋转）
    const randomStyle = cardStyles[Math.floor(Math.random() * cardStyles.length)];
    card.classList.add(randomStyle);

    // 2. 随机分配尺寸（小/中/大）
    const randomSize = cardSizes[Math.floor(Math.random() * cardSizes.length)];
    card.classList.add(randomSize);

    // 3. 随机选择关心语句
    const randomMessage = caringMessages[Math.floor(Math.random() * caringMessages.length)];
    card.textContent = randomMessage;

    // 4. 随机垂直位置（避免卡片重叠，顶部留空，底部不超出容器）
    const maxTop = window.innerHeight - 150; // 150px为卡片最大高度+底部留白
    const randomTop = Math.floor(Math.random() * maxTop);
    card.style.top = `${randomTop}px`;

    // 5. 随机动画持续时间（8-14秒），模拟流星速度差异
    const duration = 8 + Math.random() * 6;
    card.style.animation = `moveLeft ${duration}s linear forwards`;

    // 6. 添加到容器，开始流动
    container.appendChild(card);

    // 7. 更新卡片计数（实时显示）
    cardCount++;
    document.getElementById('cardCount').textContent = cardCount;

    // 8. 动画结束后移除卡片（避免DOM堆积，优化性能）
    setTimeout(() => {
        if (card.parentNode) { // 确保卡片仍在DOM中
            card.parentNode.removeChild(card);
        }
    }, duration * 1000); // 延迟时间与动画时长一致
}

初始化与控制逻辑（init/togglePause）

javascript 复制代码

// 初始化函数：页面加载时执行，启动星空与卡片生成
function init() {
    createStars(); // 生成星空背景

    // 1. 启动卡片定时生成（每800毫秒生成1张，模拟流星雨密度）
    cardGenerationInterval = setInterval(createCard, 800);

    // 2. 绑定暂停/继续按钮事件
    document.getElementById('pauseBtn').addEventListener('click', togglePause);

    // 3. 初始快速生成5张卡片（避免页面加载后空白，提升第一观感）
    for (let i = 0; i < 5; i++) {
        setTimeout(() => createCard(), i * 200); // 每200毫秒生成1张，快速填充屏幕
    }
}

// 暂停/继续控制：切换动画状态，同步更新按钮图标与卡片/星空动画
function togglePause() {
    animationPaused = !animationPaused;
    const pauseBtn = document.getElementById('pauseBtn');

    if (animationPaused) {
        // 暂停状态：更新图标，暂停所有卡片与星星动画
        pauseBtn.textContent = '▶️';
        document.querySelectorAll('.card').forEach(card => {
            card.style.animationPlayState = 'paused'; // 暂停卡片流动
        });
        document.querySelectorAll('.star').forEach(star => {
            star.style.animationPlayState = 'paused'; // 暂停星星闪烁
        });
    } else {
        // 继续状态：更新图标，恢复所有动画
        pauseBtn.textContent = '⏸️';
        document.querySelectorAll('.card').forEach(card => {
            card.style.animationPlayState = 'running'; // 恢复卡片流动
        });
        document.querySelectorAll('.star').forEach(star => {
            star.style.animationPlayState = 'running'; // 恢复星星闪烁
        });
    }
}

// 页面加载完成后初始化
window.addEventListener('load', init);

// 窗口 resize 时重新生成星空（避免屏幕尺寸变化后星星位置异常）
window.addEventListener('resize', () => {
    document.getElementById('stars').innerHTML = ''; // 清空原有星星
    createStars(); // 重新生成适配新尺寸的星星
});

各位互联网搭子，要是这篇文章成功引起了你的注意，别犹豫，关注、点赞、评论、分享走一波，让我们把这份默契延续下去，一起在知识的海洋里乘风破浪！