轨道环加载动画（Orbit Ring Loader 卫星环绕旋转）

效果演示（真实可交互）

演示区默认深色星空底，卫星沿轨道匀速环绕；点击「⇄ 换向」可让卫星反方向飞行；速度滑块 0.3× - 2.5× 实时生效；紫 / 青 / 金三套配色覆盖不同的品牌气质。

完整代码

HTML 结构：

<div class="or-rings">
  <span class="or-ring or-outer"></span>          <!-- 外圈虚线环 -->
  <span class="or-ring or-inner"></span>          <!-- 内圈细环 -->
  <span class="or-orbit"><b class="or-planet"></b></span>  <!-- 轨道 + 卫星 -->
  <span class="or-core"><b></b></span>            <!-- 核心脉冲点 -->
</div>

CSS 核心：

.or-rings { --or-dur: 2s; --or-color: #8b7cf6; position: relative; width: 150px; height: 150px; }

/* 外圈：虚线环慢速自转 */
.or-outer { inset: 0; border: 2px dashed rgba(139,124,246,.55); border-radius: 50%;
            animation: or-spin calc(var(--or-dur) * 2.2) linear infinite; }

/* 卫星轨道：整个轨道层旋转，卫星放在顶部，自然沿圆周飞行 */
.or-orbit { inset: 8px; border-radius: 50%;
            animation: or-spin var(--or-dur) linear infinite; }
.or-planet { position: absolute; top: -7px; left: 50%; width: 14px; height: 14px;
             margin-left: -7px; border-radius: 50%;
             background: radial-gradient(circle at 32% 30%, #fff, var(--or-color) 58%);
             box-shadow: 0 0 14px var(--or-color); }

/* 核心：呼吸脉冲 */
.or-core { inset: 56px; border-radius: 50%; display: grid; place-items: center;
           background: rgba(139,124,246,.18); }
.or-core b { width: 16px; height: 16px; border-radius: 50%; background: var(--or-color);
             animation: or-pulse calc(var(--or-dur) / 2) ease-in-out infinite; }

@keyframes or-spin { to { transform: rotate(360deg); } }
@keyframes or-pulse { 0%, 100% { transform: scale(1); opacity: .7; }
                      50% { transform: scale(1.5); opacity: 1; } }

JS（换向）： 给轨道层设置 orbit.style.animationDirection = 'reverse' 即可一键反向。

参数说明

兼容性与性能

• 所有旋转均基于 transform: rotate，合成层动画，不触发布局计算
• radial-gradient 背景光晕只渲染一次，动画阶段无额外开销
• 兼容 Chrome / Firefox / Safari / Edge 最新版；color-mix 在旧浏览器降级为纯色边框
• 深色场景注意对比度：核心与卫星的光晕（box-shadow）保证在深底上依然醒目
• 适合数据同步、后台任务、仪表盘刷新等需要”持续运转”语义的场景

常见问题

Q: 想让多颗卫星同轨环绕怎么做？ 复制多个 .or-orbit 层，各自设置不同的 animation-delay（如 0s / 0.5s），卫星就会均匀分布在轨道上。

Q: 轨道环看起来有点空，怎么更丰富？ 在 .or-orbit 内叠加一个反向旋转的细环（animation-direction: reverse），再加 2-3 颗小星星点（纯 box-shadow 即可）增强层次。

Q: 页面熄屏/后台时动画还耗电吗？ 浏览器会自动暂停后台标签页的 CSS 动画，无需额外处理；若在单页应用内持续显示，建议任务完成后移除该节点。

Q: 换向后卫星轨迹和虚线环方向不一致，会乱吗？ 不会，各环独立动画互不影响；刻意让内外环反向是常见的视觉手法，反而更有”齿轮咬合”的机械感。