必须用 JS 拆字计算位置并配合 CSS 动画实现可控环形文字：JS 计算每个字符的圆周坐标与旋转角度，用 transform: rotate() translate() rotate() 校正朝向，CSS 仅控制父容器整体匀速公转，resize 时需重算布局。
直接用纯 CSS 实现均匀环形文字旋转，本质不可靠——text-path 在 Safari 旧版、Firefox 某些版本里不支持，且无法动态控制单字起始角度或响应式缩放。必须用 JS 拆字 + 定位 + CSS 动画协同，才能真正可控。
JS 拆字并计算每个 span 的旋转偏移
核心是把字符串逐字符塞进 span，再用三角函数算出它们在圆周上的初始位置。不能简单用 rotate() 加固定角度，否则文字朝向会全部歪掉（比如“上”字可能倒着显示）。
- 先获取容器宽高，算出圆心坐标（如
cx = width / 2,cy = height / 2） - 每个字符的旋转角度 =
(360 / text.length) * i，但这是绕圆心的方位角，不是transform: rotate()的值 - 真正要设给
span的是：transform: rotate(${angle}deg) translate(0, -radius) rotate(${-angle}deg)—— 第一个rotate把坐标系转到对应切线方向，translate沿 y 轴推到圆周，第二个rotate把文字自身正过来 - 务必给每个
span加position: absolute和white-space: nowrap，否则换行或断字会破坏环形结构
transform-origin 必须设为 center，且容器需 transform-box: fill-box
很多动画看起来“甩出去”或中心漂移，根本原因是浏览器默认以元素左上角为旋转原点。即使你写了 transform: rotate(45deg)，它也绕左上角转，不是绕自己中心。
- 对所有参与旋转的
span，显式写transform-origin: center - 如果容器是
svg，还要加style="transform-box: fill-box"，否则transform-origin: center在某些 Chrome 版本下无效 - 不要依赖父级
transform去“修正”偏移，那只会叠加误差；每个span的定位和旋转必须独立、自包含
CSS 动画只控制整体自转，不干预单字角度
JS 负责一次性算好每个字的初始角度和位置（静态布局），CSS 只做一件事：让整个文字环匀速绕圆心公转。两者职责必须分离，否则 JS 重排 + CSS 动画会打架。
立即学习“前端免费学习笔记（深入）”；
- 给包裹所有
span的父容器（如.circle-wrapper）加动画：animation: spin 8s linear infinite @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }- 禁止对单个
span再加旋转动画——它们的角度由 JS 初始化后就固定了，动的只是整个环的位置 - 若想变速或暂停，只操作父容器的
animation-play-state，别碰子元素
最容易被忽略的是响应式场景：窗口 resize 后，圆半径变了，但 JS 不会自动重算每个 span 的 translate 距离。必须监听 resize 并重新执行拆字 + 定位逻辑，否则缩放后文字会挤成一团或飞出视口。
