粒子定位必须用position: absolute，否则路径会漂移；@keyframes路径需拆为5–15段线性/缓动弧线；超200粒子须动态添加will-change: transform并配合translateZ(0)提升图层；z-index须按欧氏距离动态计算确保中心粒子始终在上层。
粒子定位必须用 position: absolute，否则路径会漂移
绝对定位是让每个粒子脱离文档流、独立按坐标运动的前提。如果用 flex 或 grid 布局包裹粒子，动画过程中父容器重排或尺寸变化会导致粒子位置被重新计算，关键帧里的 top/left 值就失效了。
常见错误现象：transform: translate() 看似能动，但和关键帧中用 top/left 混用时，浏览器渲染优先级不一致，粒子会“跳回原位”或轨迹错乱。
- 所有粒子元素必须设
position: absolute，且父容器设position: relative - 避免在粒子上同时写
top/left和transform—— 选一个体系到底 - 粒子初始位置建议用 JS 动态算好再写入 style，别依赖 CSS 默认值
@keyframes 路径要拆成多段线性运动，不能靠单个贝塞尔曲线拟合Logo轮廓
浏览器对 animation-timing-function 的支持集中在 ease、linear、cubic-bezier() 这几类，而 Logo 轮廓通常有尖角、折线、不规则弧度——想用一个 cubic-bezier(0.2, 0.8, 0.4, 1) 搞定整条路径，结果往往是起点准、终点偏、中间飘。
正确做法是把 Logo 轮廓手动拆成 5–15 段短直线或缓动弧线，每段对应一个 @keyframes 规则，用 JS 控制粒子逐段播放。
- 用 SVG 路径工具（如 Figma 的 “Copy SVG Path”）导出 Logo 轮廓的
d值，再用 Python/JS 解析成坐标点序列 - 相邻两点间用
linear，拐角处前后两段加ease-in-out缓冲，避免生硬折返 - 不要给所有粒子套同一个
@keyframes—— 按起始位置分组，每组配不同路径片段，视觉更自然
粒子数量超过 200 个时，will-change: transform 必须加，且得配合图层提升
Chrome 和 Safari 对未提升图层的绝对定位元素做频繁 top/left 动画，会强制触发 Layout + Paint，帧率直接掉到 20fps 以下。加 will-change: transform 是告诉浏览器：“这玩意儿要动，提前开个合成图层”。但只加这句不够，还得确保它真生效。
容易踩的坑：will-change 写在粒子 class 上，但没配 transform: translateZ(0) 或 opacity: 0.99，浏览器可能忽略；或者一次性给 300 个粒子都加，内存暴涨反而卡顿。
- 只对正在运动中的粒子动态加
style.willChange = 'transform'，动画结束立刻删掉 - 配合
transform: translateZ(0)强制创建独立图层（哪怕只是translateZ(0.1px)） - 粒子数 > 150 时，考虑用
requestAnimationFrame分批启动动画，避免首帧堆叠大量重绘
Logo 边缘粒子汇聚时，z-index 层级必须动态控制
粒子从四面八方飞向 Logo，如果所有粒子 z-index 相同，靠近中心的粒子会被后入场的边缘粒子盖住，导致 Logo “拼不全”。这不是动画问题，是层叠上下文顺序问题。
解决方案不是固定某个大 z-index，而是按粒子当前离目标点的距离动态设置：越近的粒子 z-index 越高，保证最后抵达的那批始终在最上层。
- 在动画循环里实时计算粒子到目标坐标的欧氏距离：
Math.hypot(x - targetX, y - targetY) - 用该距离反推
z-index：比如zIndex = Math.floor(1000 - distance)，确保数值为整数 - 避免用小数
z-index（如1.5），部分浏览器不识别，会退化为auto
路径精度、图层控制、层级顺序——这三个点不调好，粒子再多、动画再顺，Logo 最后一帧也凑不齐。尤其是 z-index 动态计算，很多人写死一个值就跑去看效果，结果边缘粒子永远压着中心不动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
