闪烁星空背景
闪烁星空：纯 CSS 也能做出夜空——大量小圆点用 box-shadow 一次性生成（一个元素可挂几十上百个阴影点），配合 opacity 闪烁动画随机错开 delay。
经典技巧：用 box-shadow 生成一片星点（每个阴影就是一个“星星”），一个元素 + 一串阴影值搞定，比放几十个 div 高效得多。
- 一个元素用多重 box-shadow 生成满天星点
- animation: twinkle 闪烁，delay 各不相同才自然
- 月亮可用径向渐变 + 模糊画在一角
HTML
<style> .sky { position: relative; height: 220px; border-radius: 14px; margin: 30px auto; overflow: hidden; background: radial-gradient(ellipse at top, #1b2735, #090a0f); } .star { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; opacity: .2; box-shadow: 20px 30px #fff, 60px 80px #fff, 120px 40px #fff, 180px 120px #fff, 240px 60px #fff, 300px 160px #fff, 90px 180px #fff, 350px 40px #fff, 420px 100px #fff, 500px 180px #fff, 560px 30px #fff, 620px 140px #fff, 150px 90px #fff, 460px 20px #fff, 380px 190px #fff, 680px 80px #fff, 730px 170px #fff, 40px 150px #fff; animation: twinkle 3s ease-in-out infinite alternate; } .star.s2 { animation-delay: 1.2s; } .star.s3 { animation-delay: 2.1s; } @keyframes twinkle { to { opacity: 1; } } </style> <div class="sky"><div class="star"></div><div class="star s2"></div><div class="star s3"></div></div>
本节要点星空 = 多重 box-shadow 星点 + 错开 delay 的闪烁动画；一个元素就是一片星空。
