通过将旋转动画应用到外层容器而非内层小球，并合理设置 transform-origin，可让小球自然沿大圆内壁做圆周运动，始终贴合边界且不越界。
通过将旋转动画应用到外层容器而非内层小球，并合理设置 transform-origin，可让小球自然沿大圆内壁做圆周运动，始终贴合边界且不越界。
要实现“小球在大圆内部沿边缘持续滚动”的 logo 级动画效果（即小球圆心轨迹为同心圆，自身同时保持自转或随动），关键在于动画作用对象的选择与坐标原点的精确定义——而非直接对小球元素添加旋转。
在原始代码中，.circle（小球）自身被施加了 rotate 动画，且 transform-origin: 50px 50px 是相对于其自身左上角的偏移，这导致旋转中心偏离大圆圆心，小球极易移出可视区域。正确做法是：将旋转动画赋予外层 .line 容器（即大圆容器），并确保小球在容器内采用绝对定位、居中初始位置，使其绕容器中心公转。
以下是优化后的完整实现：
body {
background-color: #272727;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
}
.line {
position: relative;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #fff;
/* ✅ 动画应用于容器本身 */
animation: rotate 5s linear infinite;
}
.circle {
width: 82px;
height: 82px;
background-color: #000;
border-radius: 50%;
position: absolute;
/* ✅ 小球初始位置：水平/垂直居中于 .line 内部 */
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
/* ⚠️ 注意：此处无需 animation，但需保留 transform-origin（若后续需叠加自转） */
transform-origin: center;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
<div class="line"> <div class="circle"></div> </div>
✅ 核心原理说明：
- .line 作为旋转主体，以其自身中心（即 50% 50%）为旋转原点匀速转动；
- .circle 通过 left: 50%; top: 50%; transform: translate(-50%, -50%) 精确锚定在 .line 的几何中心；
- 因此当 .line 旋转时，其内部所有子元素（包括 .circle）将同步绕该中心做圆周运动——视觉上即小球沿大圆内壁无滑动地“滚动”。
? 进阶提示：
- 若需小球呈现真实滚动感（如接触点无相对滑动），可额外为 .circle 添加反向自转动画（rotate(-360deg)），转速与公转一致；
- 动画时长（5s）和尺寸比例（如 100px 大圆 vs 82px 小球）可根据品牌节奏与视觉平衡调整；
- 建议为 body 添加 margin: 0 防止默认边距干扰居中效果。
该方案简洁高效，兼容所有现代浏览器，且结构语义清晰，非常适合用作轻量级动态 logo 或加载指示器。
