纯css机器人动画易“飞走”的主因是absolute元素未设transform-origin，默认以左上角为旋转中心；头部需center top，手臂需top center，且父容器须relative；伪元素眨眼/张嘴需content、尺寸及will-change支持。

纯 CSS 实现机器人动画，不依赖 JavaScript 或 SVG，完全靠 transform、keyframes 和伪元素就能跑起来——但容易卡在三处：定位错乱、transform-origin 设偏、动画时序没对齐。

为什么 robot 元素一加动画就“飞走”了

根本原因是 position: absolute 元素在做 rotate 或 translate 时，若没显式设置 transform-origin，默认以左上角（0, 0）为旋转中心，导致肢体甩出可视区。

• 头部晃动要设 transform-origin: center top（不是 top center，CSS 里是 x y 顺序）
• 手臂摆动必须配 transform-origin: top center，否则会绕左边缘转
• 所有带 absolute 的部件，父容器 .robot 必须是 position: relative，否则子元素按 body 定位
• 别用 % 值写 transform-origin，某些旧版 Safari 会解析失败，改用像素或关键词

眨眼和嘴巴动怎么用 :before/:after 实现

伪元素不能直接加 animation，必须确保它有可渲染的尺寸和内容，且父元素触发重绘。常见失效点是 content: "" 没写，或 display 被覆盖为 none。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 眼睛眨眼：给 .eye::before 设 height: 100%; width: 100%; background: #000; border-radius: 50%，再用 scaleY(0) 控制闭合
• 嘴巴动：用 .mouth::after 绘制一条横线，height: 2px + background，动画中只变 transform: scaleY(0.3) 模拟张嘴
• 必须加 will-change: transform 到伪元素上，否则 Chrome 下动画可能掉帧
• 避免在伪元素上写 transition，只用 @keyframes，否则多状态切换易冲突

动画卡顿或不同步的调试方法

CSS 动画不同步，90% 是因为各部件用了不同 duration 或 delay，但没统一时间基线。别靠肉眼调，用 DevTools 的 Animations 面板逐帧拖拽看对齐点。

• 把所有关键动画 duration 统一为 2s 或 4s，用 animation-timing-function: ease-in-out 保自然感
• 头部晃动、手臂摆动、腿部弯曲建议用同一组 keyframe 名（如 sway），仅通过 animation-delay 错开相位
• 禁用 animation-play-state: paused 以外的 JS 控制，否则会打断 CSS 动画的合成层提升
• 如果机器人在移动端卡顿，检查是否用了 box-shadow 或 filter: blur()，这些会强制重绘整个图层

真正难的不是画出机器人，而是让每个 transform-origin 精确落在关节中心——差 2px，手臂就看起来像脱臼；而这个坐标，往往得靠反复测量 SVG 导出的 viewBox 坐标或截图量取，没法靠估算。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！