纯CSS可实现轻量夜空效果：月亮用伪元素加box-shadow模拟明暗，星星用rotate或clip-path绘制；动画须用transform+will-change避免重排，闪烁用steps()错峰，响应式用vmin与px结合，注意z-index层级和无障碍适配。
直接用 position: absolute + animation 就能做出轻量、可复用的月亮星星夜空效果，不需要 Canvas 或第三方库——关键不是“画得多像”，而是让元素动得自然、层级不打架、性能不掉帧。
怎么用纯 CSS 画出月亮和星星
月亮本质是带阴影的圆，星星是带 transform: rotate(45deg) 的小正方形或伪元素；别用图片，否则缩放失真、加载慢。
- 月亮：
::before伪元素 +border-radius: 50%+box-shadow模拟明暗交界（例如box-shadow: inset -4px -4px 8px #fff, inset 4px 4px 8px #666） - 星星：用
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)或transform: rotate(45deg)配合width/height: 2px的div，避免用 SVG 增加 DOM 负担 - 所有星点必须设
position: absolute，父容器设position: relative且overflow: hidden防止溢出
CSS 动画让星星“眨”、月亮“移”要避开哪些坑
“眨眼”不是简单 opacity 闪，会卡顿；“移动”不是用 left/top，会触发重排。
- 星星闪烁推荐用
opacity+animation-timing-function: steps(1)模拟离散切换，配合不同animation-delay错开节奏 - 月亮平滑移动必须用
transform: translateX()，搭配will-change: transform提前升层 - 禁用
animation-fill-mode: forwards在月亮动画上——它会让最终位置脱离文档流，导致后续 JS 获取getBoundingClientRect()失准 - 所有动画时长建议在
3s–8s之间，太短显机械，太长用户无感
响应式下夜空怎么不崩、不重叠、不糊
星空背景一旦写死像素值，换屏就全乱；但用 vmin 或 % 又容易在窄屏堆成一团。
立即学习“前端免费学习笔记（深入）”；
- 星星大小统一用
px（如2px），靠数量调节密度，而不是缩放单个元素 - 月亮尺寸用
min(12vw, 80px)，既随屏缩放又保底清晰 - 用
@media (prefers-reduced-motion: reduce)关闭动画，否则部分用户会头晕 - 移动端务必加
touch-action: none到星空容器，防止拖拽误触发浏览器默认滚动
最常被忽略的是 z-index 层级顺序：月亮必须比星星高，但又要低于文字内容；如果页面有 fixed 导航栏，月亮的 z-index 得比导航低，否则会遮住菜单。动手前先理清这一层，后面调半天动画都白费。
