console
<!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>
body {
margin: 0; height: 100vh; background: #111827; color: #fff;
font-family: 'PingFang SC', sans-serif; display: flex; flex-direction: column;
justify-content: center; align-items: center; overflow: hidden;
}
.snow {
position: absolute; top: -10px; color: #e0e7ff; font-size: 20px;
animation: fall linear infinite;
}
@keyframes fall {
to { transform: translateY(100vh); }
}
.box {
text-align: center; z-index: 10; padding: 20px;
background: rgba(255,255,255,0.05); border-radius: 15px;
border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(5px);
}
h1 { color: #fcd34d; font-size: 28px; margin: 0 0 10px 0; text-shadow: 0 0 10px #fcd34d; }
p { color: #9ca3af; font-size: 15px; line-height: 1.6; margin: 0; }
</style>
</head>
<body>
<div class="box">
<h1>❄️ 立冬快乐 ❄️</h1>
<p>岁寒,时深,添衣,勿病。</p>
<p>愿这个冬天,有暖锅,有热茶,有好事发生。</p>
</div>
<script>
// 用最少的代码实现纯CSS雪花特效
for(let i=0; i<30; i++){
let s = document.createElement('div');
s.className = 'snow';
s.innerHTML = '❄';
s.style.left = Math.random() * 100 + 'vw';
s.style.animationDuration = Math.random() * 3 + 2 + 's';
s.style.opacity = Math.random() * 0.5 + 0.3;
s.style.fontSize = Math.random() * 15 + 10 + 'px';
document.body.appendChild(s);
}
</script>
</body>
</html>