最近刷抖音，被那种满屏"关心弹幕"的酷炫卡片效果刷屏了？我也做了一个！安排！已经帮你打包好了！
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(); // 重新生成适配新尺寸的星星
});各位互联网搭子，要是这篇文章成功引起了你的注意，别犹豫，关注、点赞、评论、分享走一波，让我们把这份默契延续下去，一起在知识的海洋里乘风破浪！