动态星空粒子效果制作教程

@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

今天关于《动态星空粒子效果制作教程》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！