使用 css 动画结合 `transform` 属性中的 `rotate()` 和 `translatex()` 可以实现元素沿圆形或弧线轨迹运动。核心做法是让容器旋转，同时让子元素在相反方向或特定半径上进行位移，从而模拟出圆周运动的视觉效果。
如何实现匀速圆周运动
通过父容器持续旋转，子元素利用 `translateX` 固定在轨道半径上，即可实现完美的圆周运动。这种方法比直接计算 `top` 和 `left` 坐标更简洁且性能更好。
.circle-container {
width: 200px;
height: 200px;
position: relative;
animation: rotate 4s linear infinite;
}
.planet {
width: 20px;
height: 20px;
background: red;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
margin-top: -10px; /* 高度的一半 */
margin-left: -10px; /* 宽度的一半 */
transform-origin: center;
/* 关键：将元素推送到轨道边缘 */
transform: translateX(80px);
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}上述代码中，`.circle-container` 负责旋转，`.planet` 被定位在中心并通过 `translateX(80px)` 移动到距离中心 80px 的位置。当容器旋转时，行星随之做圆周运动。
立即学习“前端免费学习笔记（深入）”；
如何控制运动弧线与速度
调整 `animation-duration` 可以改变速度，而修改 `transform-origin` 或初始角度可以改变起始位置。若只需部分弧线运动，可修改 `@keyframes` 的角度范围。
.arc-container {
width: 200px;
height: 200px;
position: relative;
animation: arc-rotate 2s ease-in-out infinite alternate;
}
.moving-element {
width: 20px;
height: 20px;
background: blue;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
margin-top: -10px;
margin-left: -10px;
transform: translateX(80px);
}
@keyframes arc-rotate {
0% { transform: rotate(-45deg); }
100% { transform: rotate(45deg); }
}此示例中，容器仅在 -45度到 45度之间来回摆动，形成弧线轨迹。`ease-in-out` 提供了加减速效果，`alternate` 使动画在正向和反向之间交替播放。
多元素不同步轨道运动如何处理
当需要多个元素在不同半径或不同速度下运动时，可以为每个子元素设置独立的动画延迟或持续时间。例如，内层轨道元素周期短，外层周期长，从而产生相对运动感。
