box-shadow叠加+transform是最可行方案，因其用多层带偏移和透明度的阴影模拟残影，配合translate实现无重排的高性能动画，兼容性好且方向感强。
为什么 box-shadow 叠加 + transform 是最可行方案
纯 CSS 实现“残影”效果，本质是让元素在运动路径上留下若干半透明历史帧。浏览器不支持自动记录渲染快照，所以得靠人工模拟——最稳定、兼容性最好、且不触发重排的方式，就是用多个带不同 opacity 和偏移的 box-shadow 模拟拖尾，再配合 transform: translate() 做位移动画。
不用 filter: blur() 或多层 clip-path，因为前者会让残影糊成一团、失去方向感；后者性能差、Safari 支持弱，且难以控制残影密度。
-
box-shadow的每个阴影可独立设offset-x、offset-y、blur-radius和opacity，刚好对应残影的位置衰减和透明度衰减 - 所有阴影都基于同一元素渲染，不新增 DOM 节点，避免布局抖动
- 动画只驱动
transform，保证在合成层运行，60fps 有保障
box-shadow 残影参数怎么配才不糊不跳
残影不是越多越好，5～7 层足够，再多反而加重 GPU 负担、边缘发虚。关键在偏移量递增要线性，透明度递减要指数（视觉更自然）。
假设元素宽高 20px，向右快速移动，推荐这样写：
立即学习“前端免费学习笔记（深入）”；
animation: slide 0.3s linear forwards; box-shadow: 4px 0 0 0 rgba(0,0,0,0.15), 8px 0 0 0 rgba(0,0,0,0.1), 12px 0 0 0 rgba(0,0,0,0.06), 16px 0 0 0 rgba(0,0,0,0.03), 20px 0 0 0 rgba(0,0,0,0.01);
- 偏移量用固定像素（如
4px、8px），别用百分比或em，否则响应式下残影错位 -
blur-radius设为0，否则阴影扩散，残影变“毛边”，失去锐利动感 - 最后一层透明度别低于
0.01，Chrome 下0会直接跳过渲染该层阴影 - 如果动画方向是斜向（如
translate(20px, 20px)），阴影的offset-x和offset-y要同比例缩放，保持角度一致
Firefox 和 Safari 下残影突然变淡或消失？检查这三点
Firefox 对多层 box-shadow 的渲染精度略低，Safari 则对小透明度值（<0.02）有裁剪倾向。常见表现是动画中途残影“断层”或末尾几层不见。
- 把所有阴影的
spread-radius显式写成0（例如4px 0 0 0），省略时 Firefox 有时会误读为0以外的默认值 - Safari 下避免用
rgba(0,0,0,0.015)这类三位小数，统一用两位（0.01或0.02） - 确保父容器没设
overflow: hidden且自身没触发will-change: transform—— 后者在 Safari 中可能截断超出边界的阴影
想让残影随速度变化？只能靠 JS 动态改 box-shadow
CSS 本身无法根据 animation-timing-function 或当前位移实时调整阴影数量或偏移，所谓“速度越快残影越长”必须由 JS 驱动。
简单做法：监听 animationframe，计算相邻帧位移差，动态更新 element.style.boxShadow 字符串。
- 别在每一帧都拼接全部阴影字符串，先用数组存好模板，只替换偏移量和透明度值
- 残影层数建议限制在 3～5 层，JS 计算+DOM 写入太频繁会掉帧
- 移动端慎用——iOS WebKit 下高频 style 修改比纯 CSS 动画更容易触发重绘
真正难的不是写出残影，而是让残影的方向、长度、衰减节奏和运动物理感对齐。多数人卡在阴影偏移没跟上 transform 方向，或者透明度衰减太平直，看着像复印机卡纸，而不是物体掠过。调的时候盯着最后一帧的残影末端，它得“收得住”，不能飘、不能糊、不能突然断。
