纯 CSS 实现 Pacman 张嘴动画需用 conic-gradient 动态裁剪圆弧角度，避开 Safari 的 clip-path bug；移动靠预设 @keyframes 路径，碰撞停顿靠分段动画与 class 切换解耦逻辑与表现。
怎么用纯 CSS 实现 Pacman 张嘴动画
纯 CSS 能做 Pacman 的「张嘴→闭嘴→张嘴」循环，但必须绕开 clip-path 在部分 Safari 版本中的渲染 bug，改用 conic-gradient 配合 animation 控制角度裁剪。关键不是画出豆子或迷宫，而是让那个黄色圆弧“动起来”。
常见错误是直接对 border-radius 或 transform: rotate() 做动画——这只能转头，不能模拟咀嚼感。真正有效的做法是：
- 用一个
div作为 Pacman 容器，设为width: 100px; height: 100px;，背景用conic-gradient从 0deg 开始画 300deg（留 60deg 缺口模拟张嘴） - 通过
@keyframes动态改变conic-gradient的起始角和终止角，例如：从conic-gradient(from 0deg, #ffdb00 0deg, #ffdb00 300deg, transparent 300deg)→from 20deg ... 280deg - 注意 Chrome 115+ 支持
conic-gradient(from ...)动画，但 Safari 16.4 之前不支持动态from值，得退化为用background-position+ 径向渐变伪实现（更糙但兼容）
CSS 动画里怎么控制 Pacman 移动方向和碰撞停顿
CSS 本身没有“坐标检测”或“边界判断”，所以所谓“碰到墙就停”，实际是靠预设好每一段位移的 @keyframes 时间点，并在关键帧中把 transform: translateX() 和 translateY() 设为固定值。这不是实时物理，而是手绘路径动画。
容易踩的坑：
立即学习“前端免费学习笔记（深入）”；
- 用
animation-timing-function: steps(1)模拟“格子移动”时，必须确保总时长能被步数整除，否则最后一帧会卡顿 - 想让 Pacman 在“吃豆子”时暂停 0.2s，不能只加
animation-delay，得拆成两个独立动画：移动动画 + 嘴部暂停动画，用animation-play-state手动控制暂停时机 - 移动端 touch 事件无法直接触发 CSS 动画重播，需用 JS 切换 class 触发
animation: pacman-move 0.5s forwards重放单次位移
为什么用 mask-image 替代 clip-path 更稳
当 Pacman 要沿复杂路径（比如绕字母“P”轮廓跑）时，clip-path: path("...") 在 Firefox 和旧 Edge 中完全不支持，而 mask-image: linear-gradient(...) 或 SVG mask 虽写法稍繁，但兼容性高出一截。
实操建议：
- 准备一个极简 SVG
<mask id="pacman-mask"><circle cx="50" cy="50" r="40"/></mask>，然后在 CSS 中写mask-image: url(#pacman-mask); - 不要用
mask-border——它在 Safari 中行为不一致，且无法配合animation - 如果 mask 需要随 Pacman 旋转，别对 mask 元素本身 transform，而是用
mask-position+mask-size配合 background 动画模拟相对运动
JS 只负责触发，CSS 负责表现：怎么解耦逻辑与动画
真正的难点不在画嘴，而在“什么时候该张嘴、往哪走、吃到没”。这些必须由 JS 判断，但动画本身应完全交给 CSS —— 否则帧率一掉，Pacman 就像喝醉了一样歪着跑。
推荐做法：
- JS 只管理状态变量：如
currentDirection = 'right'、isEating = true，然后切换元素的 class，例如pacman--right.pacman--eating - CSS 中写：
.pacman--right { animation: move-right 0.4s steps(1); }、.pacman--eating { animation: chomp 0.2s infinite; } - 避免在 JS 里调用
element.animate()：它创建的动画优先级高于 CSS，容易覆盖掉你精心写的@keyframes，尤其在快速连按方向键时
最易被忽略的是动画重叠时的 animation-fill-mode 设置——不加 forwards，Pacman 移动完就弹回原点；加了又可能挡住后续方向动画的初始位置。实际项目里，得为每个方向单独定义 animation-name 并配好 animation-direction: normal 和 animation-iteration-count: 1。
