<
!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 {
height: 100vh;
background: #fdf2f9;
font-family: "Arial Rounded MT Bold", "微软雅黑", sans-serif;
overflow: hidden;
cursor: pointer;
}
/* 封面样式（浪漫粉色系） */
.cover {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #ff6b9e 0%, #f783ac 100%);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 9999;
transition: opacity 0.8s ease;
}
.cover h1 {
font-size: 52px;
color: #fff;
text-shadow: 0 3px 15px rgba(0,0,0,0.2);
margin-bottom: 25px;
text-align: center;
}
.cover p {
font-size: 26px;
color: #fff;
text-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/* 长条形对话框便签 */
.note {
position: absolute;
padding: 14px 22px;
background: #fff;
border-radius: 35px;
box-shadow: 0 4px 18px rgba(0,0,0,0.12);
font-size: 18px;
color: #2d3748;
max-width: 240px;
text-align: center;
animation: float 10s infinite ease-in-out;
opacity: 0;
transition: opacity 0.6s ease;
z-index: 1;
}
/* 7种浪漫配色（避免重复感） */
.note.color1 { background: #ffe0f0; border: 1px solid #ff6b9e; }
.note.color2 { background: #e0f5ff; border: 1px solid #6bb6ff; }
.note.color3 { background: #f0e0ff; border: 1px solid #a78bfa; }
.note.color4 { background: #e0ffe8; border: 1px solid #6ee7b7; }
.note.color5 { background: #fff9e0; border: 1px solid #facc15; }
.note.color6 { background: #ffe0e0; border: 1px solid #f87171; }
.note.color7 { background: #e0f0ff; border: 1px solid #3b82f6; }
/* 悬浮动画（温柔浪漫） */
@keyframes float {
0% { transform: translateY(0) rotate(-0.5deg); }
50% { transform: translateY(-25px) rotate(0.5deg); }
100% { transform: translateY(0) rotate(-0.5deg); }
}
</style>
</head>
<body>
<
!-- 专属封面 -->
<div class="cover" id="cover">
<h1>琛琛你有一份神秘礼物</h1>
<p>点击屏幕开启欢欢的心意 💖</p>
</div>
<script>
// 200条表白祝福（核心突出“欢欢想你/爱你”，搭配温馨关怀）
const notesText = [
"琛琛，欢欢超想你",
"记得好好吃饭呀",
"天气冷了多穿件衣",
"琛琛，欢欢爱你哟",
"要好好爱自己呀",
"愿你每天都快乐",
"琛琛，欢欢超爱你",
"别太累啦 注意休息",
"你的笑容超治愈",
"今天也要元气满满",
"琛琛，欢欢一直想你",
"照顾好自己 等欢欢",
"愿你被世界温柔以待",
"三餐规律 身体健康",
"琛琛，欢欢超喜欢你",
"不开心就告诉欢欢",
"愿你万事顺意",
"每天都要甜甜的",
"琛琛，欢欢超爱你呀",
"多喝水 皮肤好好",
"天气热了别中暑",
"琛琛，欢欢的想念藏不住",
"要一直开开心心的",
"生活有你才更美好",
"琛琛，欢欢超想见到你",
"累了就停下来歇一歇",
"你是欢欢最牵挂的人",
"愿你平安喜乐",
"琛琛，欢欢爱你到永远",
"每天都有小幸运",
"记得吃早餐 很重要",
"下雨记得带伞呀",
"琛琛，欢欢想和你看日落",
"你超棒的 要自信",
"愿你无忧无虑",
"琛琛，欢欢超爱你呀",
"生活明朗 万物可爱",
"别熬夜啦 早点休息",
"琛琛，欢欢会一直陪着你",
"愿你笑容常在",
"每天都有好心情",
"琛琛，欢欢超想你呀",
"记得补充维生素",
"天冷记得泡脚呀",
"琛琛，想念你的每一个瞬间",
"愿你事事顺心",
"你值得所有美好",
"琛琛，欢欢超爱你哟",
"偶尔放松 别给自己压力",
"阳光正好 你也很好",
"琛琛，欢欢想和你吃好多饭",
"愿你健康平安",
"每天都要开开心心",
"琛琛，欢欢超爱你呀",
"记得给生活加点甜",
"风里雨里 欢欢在想你",
"琛琛，欢欢爱你呀",
"愿你没有烦恼",
"你笑起来真好看",
"琛琛，欢欢超想你呀",
"好好生活 慢慢相爱",
"琛琛，欢欢爱你到骨子里",
"记得按时吃午饭",
"天气变凉 注意保暖",
"琛琛，欢欢超喜欢你呀",
"
工作再
忙 也要休息",
"愿你事事顺心如意",
"琛琛，欢欢一直爱你",
"你的存在 照亮欢欢的世界",
"每天都要元气满满呀",
"琛琛，欢欢超想你哟",
"别委屈自己 要开心",
"愿你好运连连",
"琛琛，欢欢爱你不止一点点",
"记得多吃水果",
"加班别太晚 注意身体",
"琛琛，欢欢超想和你聊天",
"你是欢欢的专属温柔",
"愿你喜乐常伴",
"琛琛，欢欢爱你呀",
"走路小心 别摔着",
"每天都要甜甜蜜蜜",
"琛琛，欢欢超爱你哟",
"记得好好睡觉",
"愿你无灾无难",
"琛琛，欢欢想你想到睡不着",
"你的声音超好听",
"生活处处是惊喜",
"琛琛，欢欢超爱你呀",
"别太累 要照顾好自己",
"愿你心想事成",
"琛琛，欢欢一直想你呀",
"记得喝温热水",
"天气转凉 添件衣服",
"琛琛，欢欢爱你哟",
"你超优秀 要相信自己",
"愿你天天开心",
"琛琛，欢欢超想你呀",
"偶尔给自己放个假",
"你的陪伴超安心",
"琛琛，欢欢超爱你",
"愿你平安健康",
"每天都有小确幸",
"琛琛，欢欢想和你在一起",
"记得吃点坚果 补营养",
"下雨别淋着 带好伞",
"琛琛，欢欢爱你呀",
"愿你烦恼全消",
"你笑起来 世界都亮了",
"琛琛，欢欢超想你哟",
"别熬夜 对身体不好",
"愿你事事顺意",
"琛琛，欢欢超爱你呀",
"记得好好吃饭 别凑活",
"天冷多喝热汤",
"琛琛，欢欢一直爱你呀",
"你的温柔超治愈",
"愿你喜乐无忧",
"琛琛，欢欢超想你",
"每天都要开开心心的",
"记得多运动 强身体",
"琛琛，欢欢爱你哟",
"愿你好运常伴",
"你是欢欢的偏爱和例外",
"琛琛，欢欢超爱你呀",
"别太拼 要劳逸结合",
"生活甜甜 好运连连",
"琛琛，欢欢想你啦",
"记得给手机充电",
"天气热了多喝凉茶",
"琛琛，欢欢爱你到永远",
"愿你事事顺心如意",
"你的笑容超甜",
"琛琛，欢欢超想你呀",
"别委屈自己 要快乐",
"愿你平安喜乐",
"琛琛，欢欢超爱你哟",
"记得吃晚餐 别饿肚子",
"加班记得点好饭",
"琛琛，欢欢一直想你呀",
"愿你无牵无挂",
"你超棒的 欢欢为你骄傲",
"琛琛，欢欢超爱你",
"每天都有好心情呀",
"记得好好休息 别熬夜",
"琛琛，欢欢想和你看星星",
"愿你烦恼不扰",
"你的存在 超有意义",
"琛琛，欢欢超想你哟",
"天冷记得戴围巾",
"愿你事事顺心",
"琛琛，欢欢爱你呀",
"记得多喝温水 护肠胃",
"你的善良超可爱",
"琛琛，欢欢超爱你呀",
"愿你喜乐常伴",
"每天都要甜甜蜜蜜的",
"琛琛，欢欢想你啦",
"别太累 要好好照顾自己",
"愿你好运连连",
"琛琛，欢欢超爱你哟",
"记得吃早餐 别空腹",
"下雨记得关窗",
"琛琛，欢欢一直爱你",
"愿你事事如意",
"你的陪伴 超温暖",
"琛琛，欢欢超想你",
"每天都要元气满满呀",
"记得多吃蔬菜 补维生素",
"琛琛，欢欢爱你呀",
"愿你平安健康",
"别熬夜 早点休息",
"琛琛，欢欢超爱你哟",
"生活有你 超美好",
"愿你烦恼全消",
"琛琛，欢欢想你想到心都甜",
"记得好好吃饭 好好生活",
"天气冷了 注意保暖",
"琛琛，欢欢超爱你",
"愿你事事顺心如意",
"你的笑容 超治愈欢欢",
"琛琛，欢欢一直想你",
"每天都有小幸运呀",
"记得多喝水 别缺水",
"琛琛，欢欢爱你到永远呀",
"愿你喜乐无忧",
"别太累 要劳逸结合",
"琛琛，欢欢超想你哟",
"你的优秀 超耀眼",
"愿你平安喜乐",
"琛琛，欢欢超爱你呀",
"记得吃点甜食 开心一下",
"下雨别出门 注意安全",
"琛琛，欢欢想和你一直在一起",
"愿你事事顺意",
"你的温柔 超治愈",
"琛琛，欢欢超想你",
"每天都要开开心心",
"记得好好睡觉 养精神",
"琛琛，欢欢爱你哟",
"愿你好运常伴",
"别委屈自己 要快乐",
"琛琛，欢欢超爱你呀",
"生活甜甜 万事顺意",
"记得多运动 强身体",
"琛琛，欢欢一直想你呀",
"愿你平安健康",
"你的存在 超重要",
"琛琛，欢欢超想你哟",
"天冷多穿衣服 别感冒",
"愿你事事顺心",
"琛琛，欢欢爱你呀",
"记得吃晚餐 别熬夜
工作",
"你的笑容 超甜呀",
"琛琛，欢欢超爱你",
"愿你喜乐常伴",
"每天都有小确幸",
"琛琛，欢欢想你啦",
"别太拼 要照顾好自己",
"愿你好运连连",
"琛琛，欢欢超爱你哟",
"记得给生活加点甜",
"天气热了 别中暑",
"琛琛，欢欢一直爱你呀",
"愿你事事如意",
"你的陪伴 超安心",
"琛琛，欢欢超想你",
"每天都要元气满满",
"记得好好吃饭 别凑活",
"琛琛，欢欢爱你到永远",
"愿你平安喜乐",
"别熬夜 对身体不好",
"琛琛，欢欢超爱你呀",
"生活有你 超幸福",
"愿你烦恼不扰",
"琛琛，欢欢想你想到睡不着",
"记得多喝温水",
"你的善良 超可爱",
"琛琛，欢欢超爱你哟",
"愿你事事顺心如意",
"每天都要甜甜蜜蜜",
"琛琛，欢欢一直想你",
"别太累 要休息",
"愿你好运常伴",
"琛琛，欢欢超想你呀",
"记得吃早餐 很重要",
"下雨带好伞",
"琛琛，欢欢爱你呀"
];
// 生成便签（优化位置和性能，避免卡顿）
function createNote(text, index) {
const note = document.createElement("div");
note.className = `note color${Math.floor(Math.random() * 7) + 1}`;
note.textContent = text;
// 随机位置（避免超出屏幕，减少重叠）
const x = Math.random() * (window.innerWidth - 260) + 20;
const y = Math.random() * (window.innerHeight - 100) + 30;
note.style.left = `${x}px`;
note.style.top = `${y}px`;
note.style.opacity = "0";
// 每0.07秒依次弹出（200条14秒完成，浪漫不拖沓）
setTimeout(() => {
note.style.opacity = "1";
}, index * 70);
document.body.appendChild(note);
}
// 点击封面触发效果（分批渲染，优化性能）
document.getElementById("cover").addEventListener("click", function() {
this.style.opacity = "0";
setTimeout(() => {
this.style.display = "none";
}, 800);
// 分批生成，避免卡顿
let batchIndex = 0;
const batchSize = 25;
function generateBatch() {
const start = batchIndex * batchSize;
const end = Math.min(start + batchSize, notesText.length);
for (let i = start; i < end; i++) {
createNote(notesText[i], i);
}
batchIndex++;
if (start < notesText.length) {
requestAnimationFrame(generateBatch);
}
}
generateBatch();
});
</script>
</body>
</html>
扫一扫
600
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
