CSS 实现元素沿圆形路径平滑运动的完整教程

本文详解如何使用纯 css 让元素（如文字）沿完美圆形轨迹匀速、无缝地运动，解决初始位移跳变、动画不连贯等常见问题，并提供可直接运行的代码方案与关键原理说明。

要让一个 HTML 元素（例如 NEN）沿圆形路径平滑运动，核心在于组合两次旋转（rotate）与一次径向位移（translateX），从而实现“绕中心公转”的视觉效果。你原始代码中出现的“跳变”，根本原因是：transform: translate(-50%, -50%) 与动画中的 translateX(150px) 发生了叠加冲突，且起始/结束帧未形成视觉闭环。

✅ 正确做法是：将元素置于圆心，通过 rotate() 驱动其父级坐标系旋转，再用 translateX(r) 将其“甩”到半径为 r 的圆周上，最后用反向 rotate(-θ) 抵消自身旋转，保持元素朝向不变。这就是经典“旋转坐标系 + 平移 + 反旋”三步法。

以下是可直接运行的完整示例（已移除前缀兼容写法，现代浏览器原生支持）：

  NEN

.orbital-container {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 100px auto;
  border-radius: 50%;
  overflow: visible; /* 确保元素不被裁剪 */
}

.element {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-weight: bold;
  font-family: sans-serif;
  /* 关键：初始居中于圆心，不提前 translate */
  transform: translate(-50%, -50%);
  animation: orbit 4s linear infinite;
}

@keyframes orbit {
  from {
    transform: translate(-50%, -50%) rotate(0deg) translateX(150px) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg) translateX(150px) rotate(-360deg);
  }
}

? 关键解析：

• .orbital-container 作为视觉参考圆（可加 border: 1px dashed #ccc 辅助调试），尺寸决定轨道直径；
• .element 初始 translate(-50%, -50%) 精准锚定自身中心到容器中心点（即圆心）；
• 动画中 rotate(θ) 旋转整个局部坐标系 → translateX(150px) 沿新 X 轴正方向移动 150px（即到达半径 150px 的圆周）→ rotate(-θ) 将元素自身逆向旋转，抵消坐标系旋转，使其始终正立不翻转。

⚠️ 注意事项：

• 务必避免在 .element 上额外设置 top/left 偏移或 margin，否则会破坏圆心对齐；
• 若需多元素同轨运动，可复用相同动画，仅调整 animation-delay 实现错相效果；
• 如需响应式圆形轨道，建议用 vw 或 vmin 替代固定像素值（如 translateX(25vw)）；
• 不推荐使用 transform: path()（目前仅 Safari 实验性支持），CSS @keyframes 方案兼容性更佳（Chrome/Firefox/Safari/Edge ≥ 79）。

? 进阶提示：若希望文字沿圆弧排布（如环形文字），则需结合 SVG 或 CSS shape-outside + 多段伪元素拼接——但那是另一类需求，本文聚焦“点状元素公转”。

掌握此方法后，你不仅能实现文字绕圈，还可轻松扩展至图标、按钮甚至多个粒子同步轨道运动，真正用纯 CSS 构建轻量级动态 UI。