纯CSS用SVG剪影+@keyframes实现多角色自然走动，通过差异化animation-duration、负值animation-delay和cubic-bezier时序函数避免机械同步，并叠加translateY和rotateZ模拟步伐起伏。
用 CSS 动画 + SVG 剪影实现多角色走动效果
纯 CSS 实现“多个人物在背景中走动的剪影”，本质是用 @keyframes 驱动多个独立元素沿路径位移，配合 clip-path 或 SVG <use></use> 复用剪影图形。不依赖 JS，但必须手动控制节奏和错位，否则会像机器人齐步走。
为什么不用 GIF 或视频？
GIF 帧率低、文件大、无法单独控制每个角色速度；视频无法响应式缩放剪影边缘（尤其移动端），且难以与页面其他动画同步。CSS 方案优势在于：可精确控制每个 animation-duration、animation-delay 和 transform: translateX() 路径长度，让走动更自然。
关键陷阱：剪影边缘发虚或锯齿
直接用 PNG 剪影图在缩放时极易模糊——SVG 是唯一可靠选择。务必确保 SVG 中的剪影路径是 fill="black" 且无描边（stroke="none"），导出时关闭“响应式”和“视图框裁剪”选项。常见错误：background-image: url(./shadow.png) → 改为 mask-image: url(#shadow-svg) 或内联 <svg><defs><clippath id="walk"><path d="..."></path></clippath></defs></svg>。
CSS 动画参数怎么配才不机械？
多个角色走动要避免同步，靠三处错开：
立即学习“前端免费学习笔记（深入）”；
-
animation-duration设不同值（如8s、10.3s、7.6s） -
animation-delay用负值启动错峰（如-2s、-0.7s、-3.2s） -
animation-timing-function别全用linear，混入cubic-bezier(0.3,0.8,0.5,1)模拟步伐起伏
示例片段：
div.person-1 {
animation: walk 8s infinite linear;
}
div.person-2 {
animation: walk 10.3s infinite cubic-bezier(0.3,0.8,0.5,1);
animation-delay: -0.7s;
}
真正难的是让剪影“像在走”而不是“在滑”——得加轻微上下浮动（translateY(-2px) 到 translateY(1px)）和左右肩部倾斜（rotateZ(-1deg)/rotateZ(1deg)）。这些细节不写进动画关键帧里，就只是平面飘移。
