祝你天天开心
*{margin:0;padding:0;box-sizing:border-box;font-family:"Microsoft YaHei",sans-serif}
body{
background:linear-gradient(135deg,#ff9a9e 0%,#fecfef 25%,#fecfef 50%,#a1c4fd 75%,#c2e9fb 100%);
min-height:100vh;
overflow-x:hidden;
}
.container{
max-width:1000px;
margin:0 auto;
padding:30px 20px;
}
.title{
font-size:48px;
color:#fff;
text-align:center;
margin-top:50px;
text-shadow:0 0 15px rgba(255,255,255,0.8),0 0 30px rgba(255,105,180,0.6);
}
.subtitle{
font-size:24px;
color:#fff;
text-align:center;
margin:20px 0 50px;
text-shadow:0 0 10px rgba(255,255,255,0.5);
}
.box{
background:rgba(255,255,255,0.2);
backdrop-filter:blur(10px);
border-radius:20px;
padding:30px;
margin:20px 0;
border:1px solid rgba(255,255,255,0.3);
box-shadow:0 8px 32px rgba(31,38,135,0.15);
min-height:300px;
}
.phrase{
font-size:22px;
color:#fff;
margin:16px 0;
line-height:1.6;
text-align:center;
opacity:0;
transform:translateY(30px);
transition:all 0.8s ease;
}
.phrase.fly{
opacity:1;
transform:translateY(0);
}
.heart{
position:fixed;
pointer-events:none;
animation:float 3s linear infinite;
color:#ff5e96;
font-size:20px;
z-index:99;
}
@keyframes float{
0%{transform:translateY(0) rotate(0deg);opacity:1}
100%{transform:translateY(-100vh) rotate(720deg);opacity:0}
}
.moon{
position:fixed;
top:30px;
right:30px;
width:80px;
height:80px;
background:#fff;
border-radius:50%;
box-shadow:0 0 30px #fff,0 0 60px #ffd700;
animation:moonlight 8s linear infinite;
}
@keyframes moonlight{
0%,100%{transform:scale(1)}
50%{transform:scale(1.08)}
}
.star{
position:fixed;
background:#fff;
border-radius:50%;
animation:twinkle 2s ease-in-out infinite;
}
@keyframes twinkle{
0%,100%{opacity:0.3}
50%{opacity:1}
}
✨ 祝你天天开心 ✨
愿你每一天都被温柔与快乐包围
