本文详解如何用纯 css 让元素（如文字）沿完美圆形轨迹匀速、无缝地运动，重点解决初学者常遇的“起始/结束位置跳变”问题，并提供可复用的标准化方案。
实现元素沿圆形路径运动的核心原理是：利用嵌套旋转（rotate）抵消父级位移带来的方向偏转，使元素自身朝向始终一致（如正立），同时通过 translateX() 将其“甩出”到指定半径的圆周上。你原始代码中跳变的根本原因在于：transform: translate(-50%, -50%) 与动画中的 translateX(150px) 发生冲突，且未统一坐标系原点；此外，缺少 animation-timing-function: linear 会导致非匀速运动，加剧视觉突兀感。
✅ 正确做法如下（已兼容现代浏览器，无需 -webkit- 前缀）：
.circular-orbit {
position: absolute;
top: 50%;
left: 50%;
/* 关键：将元素中心对齐到圆心 */
transform: translate(-50%, -50%);
/* 可选：确保不被裁剪 */
pointer-events: none;
}
.circular-orbit > * {
/* 重置子元素自身变换，避免继承干扰 */
display: inline-block;
transform: translate(0, 0);
}
/* 圆周运动动画：360°旋转容器 + 沿X轴平移 + 反向自旋抵消 */
@keyframes orbit {
from {
transform: rotate(0deg) translateX(150px) rotate(0deg);
}
to {
transform: rotate(360deg) translateX(150px) rotate(-360deg);
}
}
.orbiting-element {
animation: orbit 4s linear infinite; /* linear 确保匀速，infinite 实现循环 */
}<div class="circular-orbit"> <span class="orbiting-element">NEN</span> </div>
? 关键要点解析：
- ✅ position: absolute + top: 50%; left: 50%; transform: translate(-50%, -50%) 精准锚定圆心；
- ✅ translateX(150px) 定义圆周半径（单位可为 px、rem 或 %），数值即圆心到元素中心的距离；
- ✅ 外层 rotate() 控制轨道公转，内层反向 rotate(-360deg) 抵消旋转，使文字始终保持 upright（正立）；
- ✅ animation-timing-function: linear 是消除“加速-减速”跳变感的必要条件；
- ⚠️ 避免在 .orbiting-element 上额外设置 transform: translate()，否则会与动画 transform 合并导致偏移错乱；
- ? 若需多元素同步绕行不同半径，可为每个元素单独设置 translateX() 值，并共用同一 @keyframes。
该方案轻量、声明式、无 JS 依赖，适用于图标环绕、加载指示器、动态导航菜单等场景。只需调整 translateX() 和 animation-duration，即可快速适配任意尺寸与节奏需求。
立即学习“前端免费学习笔记（深入）”；
