不能只靠一个元素，因为所有box-shadow白点固定在元素坐标系中无法独立运动；需分3–5层div，每层用不同animation-duration、linear缓动及transform:translateY()实现匀速飘移，配合1px+零模糊box-shadow模拟锐利白点，并为每层添加will-change:transform和translateZ(0)修复Safari兼容性。
用 box-shadow 叠多层白点做星空，为什么不能只靠一个元素？
单个 <div> 加一堆 <code>box-shadow 确实能打出密密麻麻的小点，但所有点都固定在元素坐标系里——没法动。想“无限向上平移”，必须让每层点有独立位移节奏和速度，否则会卡顿、穿帮或变成整体滑动。真实做法是分 3–5 层 <div>，每层用不同 <code>animation-duration 和 animation-timing-function 控制飘速和缓动。
@keyframes 动画里写 transform: translateY() 还是改 top？
必须用 transform: translateY()。改 top 触发 layout + paint，帧率直接掉到 30fps 以下；transform 走合成层，GPU 加速，60fps 更稳。动画起点设为 translateY(100vh)（从视口底部外入场），终点设为 translateY(-100px)（跑出顶部一点点），这样粒子不会在顶部堆成线。
- 别用
100%做位移单位——它依赖父容器高度，而星空层常设position: fixed，%会失效 - 每层动画时长差异至少 2s 以上，比如 8s / 12s / 18s，避免周期重合导致视觉停顿
- 加
animation-timing-function: linear，别用ease——星空要匀速感，加速减速反而像受引力干扰
怎么用纯 CSS 控制“极小的白点”且不糊、不闪烁？
点不是用 border-radius: 50% 画圆，而是用 width: 1px; height: 1px; + box-shadow 扩散。1px 元素本身在高清屏上可能被亚像素渲染搞模糊，但 box-shadow 是矢量投影，锐利不糊。关键参数：把 box-shadow 的模糊半径设为 0，扩散值设为 0，只靠多组偏移模拟随机分布。
- 例如：
box-shadow: 2px 3px #fff, -5px -1px #fff, 8px -4px #fff—— 每个都是硬边白点 - 别用
inset，它会让点陷进背景，失去星空的“悬浮感” - 总点数控制在 30–60 个/层，超过浏览器重绘压力明显上升，尤其 Safari
移动端 Safari 上粒子突然消失或卡住，怎么修？
这是 Safari 对 transform + fixed 容器的已知 bug：当页面滚动或键盘弹出时，动画层可能被强制重置。解法很简单，在根容器加 will-change: transform，并确保每层星空都有 transform: translateZ(0) 强制创建独立合成层。
立即学习“前端免费学习笔记（深入）”；
- 别只给最外层加
will-change，每一层粒子容器都要单独加 - 如果用了
backface-visibility: hidden，记得同步加transform: translateZ(0)，否则无效 - 测试时关掉“减少动画”系统设置，iOS 开启该选项会直接禁用
animation
