<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>中秋节快乐</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;}
.envelope-page{
width:100vw;height:100vh;
background-image:url('https://p3-flow-image-sign.douyinpic.com/tos-cn-i-3n3d0c7fce/51c415f330f3476899ac4f2499a7b741~tplv-3n3d0c7fce-image.jpeg');
background-size:cover;
background-position:center;
background-repeat:no-repeat;
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
z-index:99;
position:absolute;
top:0;left:0;
}
.envelope{
font-size:120px;
color:#ff77dd;
filter: drop-shadow(0 0 12px #ff77dd);
cursor:pointer;
animation: envelopeShine 1.5s ease-in-out infinite alternate;
margin-top:60vh;
}
.envelope-tip{
color:#ffffff;
margin-top:10px;
font-size:18px;
text-shadow:0 0 8px #000000;
}
@keyframes envelopeShine{
0%{opacity:0.7;transform:scale(0.96)}
100%{opacity:1;transform:scale(1.02)}
}
.danmu-page{
width:100vw;height:100vh;
background:
radial-gradient(circle at 20% 10%, rgba(30,144,255,0.18), transparent 28%),
radial-gradient(circle at 80% 15%, rgba(72,255,170,0.12), transparent 32%),
linear-gradient(180deg, #050b2c 0%, #08143a 45%, #0d1f50 100%);
display:none;
overflow:hidden;
position:absolute;
top:0;left:0;
}
.polar-light{
position:absolute;
width:100%;
height:100%;
background:
radial-gradient(ellipse at 15% 25%, rgba(30,144,255,0.35), transparent 28%),
radial-gradient(ellipse at 85% 20%, rgba(72,255,170,0.25), transparent 32%),
radial-gradient(ellipse at 50% 10%, rgba(255,255,255,0.08), transparent 40%);
animation: polarLightDrift 8s ease-in-out infinite alternate;
z-index:1;
}
.snow-fog{
position:absolute;
width:100%;
height:100%;
background:radial-gradient(circle at 10% 90%, rgba(255,255,255,0.12), transparent 24%),
radial-gradient(circle at 90% 85%, rgba(255,255,255,0.08), transparent 28%);
z-index:1;
animation: snowFogSlow 12s ease-in-out infinite alternate;
}
.danmu{
position:absolute;
white-space:nowrap;
color:#ff77dd;
text-shadow: 0 0 8px #ff55cc;
font-size:24px;
animation: move 12s linear infinite;
z-index:3;
}
.star{
position:absolute;
color:#ffdd77;
font-size:40px;
animation: move 14s linear infinite, twinkle 1s ease-in-out infinite alternate;
z-index:2;
}
.cold-star{
position:absolute;
width:3px;
height:3px;
background:#ffffff;
border-radius:50%;
box-shadow:0 0 4px #ffffff;
z-index:2;
}
.moon{
position:absolute;
top:8vh;
left:50%;
width:70px;
height:70px;
margin-left:-35px;
border-radius:50%;
background:#fff8cc;
box-shadow:0 0 25px #ffdd77, 0 0 50px #ffdd77;
z-index:4;
animation: moonGlow 3s ease-in-out infinite alternate;
}
@keyframes polarLightDrift{
0%{transform:translateX(-8px) translateY(4px);}
100%{transform:translateX(8px) translateY(-4px);}
}
@keyframes snowFogSlow{
0%{opacity:0.35;}
100%{opacity:0.55;}
}
@keyframes moonGlow{
0%{box-shadow:0 0 25px #ffdd77, 0 0 50px #ffdd77;}
100%{box-shadow:0 0 35px #ffdd77, 0 0 70px #ffdd77;}
}
@keyframes shineText {
0% {
opacity:0.7;
text-shadow:0 0 8px #ffd700,0 0 15px #ffb900;
}
100% {
opacity:1;
text-shadow:0 0 16px #ffd700,0 0 30px #ffb900;
}
}
@keyframes move{
0% {transform: translateX(100vw);}
100% {transform: translateX(-120%);}
}
@keyframes twinkle{
0% {opacity:0.4;text-shadow:0 0 3px #ffdd77;}
100% {opacity:1;text-shadow:0 0 12px #fff8aa;}
}
@keyframes coldStarTwinkle{
0%{opacity:0.2;}
100%{opacity:1;}
}
</style>
</head>
<body>
<div class="envelope-page" id="envelopeWrap">
<div class="envelope" id="envelope">✉️</div>
<div class="envelope-tip">点击信封，开启祝福</div>
</div>
<div class="danmu-page" id="danmuWrap">
<div class="polar-light"></div>
<div class="snow-fog"></div>
<div class="moon"></div>
</div>
<script>
const textList = [
"中秋节快乐",
"中秋别感冒",
"中秋月明如白昼 门窗开启迎丰收",
"祝福声声传千里 幸福年年有增无减",
"明月高挂照九州 中秋祝福送给你",
"愿你吉祥如意绕身旁 开心快乐无忧愁"
];
function createDanmu(){
const text = textList[Math.floor(Math.random()*textList.length)];
const div = document.createElement('div');
div.className = "danmu";
div.innerText = text;
div.style.top = `${Math.random() * 90}vh`;
div.style.fontSize = `${16 + Math.random()*22}px`;
div.style.animationDuration = `${8 + Math.random()*8}s`;
document.getElementById('danmuWrap').appendChild(div);
setTimeout(()=>div.remove(),16000);
}
function createStar(){
const star = document.createElement('div');
star.className = "star";
star.innerText = "★";
star.style.top = `${Math.random() * 90}vh`;
star.style.animationDuration = `${9 + Math.random()*7}s`;
document.getElementById('danmuWrap').appendChild(star);
setTimeout(()=>star.remove(),17000);
}
function createColdStar(){
const star = document.createElement('div');
star.className = "cold-star";
star.style.top = `${Math.random() * 100}vh`;
star.style.left = `${Math.random() * 100}vw`;
star.style.animationDelay = `${Math.random() * 2}s`;
document.getElementById('danmuWrap').appendChild(star);
setTimeout(()=>star.remove(),8000);
}
const envelopeWrap = document.getElementById("envelopeWrap");
const danmuWrap = document.getElementById("danmuWrap");
document.getElementById("envelope").onclick = function(){
envelopeWrap.style.display = "none";
danmuWrap.style.display = "block";
setInterval(createDanmu,450);
setInterval(createStar,1200);
setInterval(createColdStar,600);
}
</script>
</body>
</html>
