本文详解如何使用纯 css 让元素（如文字）沿完美圆形轨迹匀速、无缝地运动，解决初始位移跳变、动画不连贯等常见问题，并提供可直接运行的代码方案与关键原理说明。
要让一个 HTML 元素（例如 NEN）沿圆形路径平滑运动，核心在于组合两次旋转（rotate）与一次径向位移（translateX），从而实现“绕中心公转”的视觉效果。你原始代码中出现的“跳变”，根本原因是：transform: translate(-50%, -50%) 与动画中的 translateX(150px) 发生了叠加冲突，且起始/结束帧未形成视觉闭环。
✅ 正确做法是：将元素置于圆心，通过 rotate() 驱动其父级坐标系旋转，再用 translateX(r) 将其“甩”到半径为 r 的圆周上，最后用反向 rotate(-θ) 抵消自身旋转，保持元素朝向不变。这就是经典“旋转坐标系 + 平移 + 反旋”三步法。
以下是可直接运行的完整示例（已移除前缀兼容写法，现代浏览器原生支持）：
<div class="orbital-container"> <div class="element">NEN</div> </div>
.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 构建轻量级动态 UI。
