这是一款基于纯 CSS 自定义属性与三角函数技术实现的星环环绕的轨道粒子球动画。暗色背景中央是一颗覆盖彩色粒子的球体，圆点和细圆环不断出现、长大、隐去，外侧三条倾斜轨道上还有星形与圆点运行。它使用自定义属性、三角函数与选择器处理位置和控制状态。暂停、慢放、隐藏轨道与重播入场都由页面控件配合 CSS 完成，不需要动画脚本或图片。
纯CSS星环粒子球有哪些可控状态
球面粒子按角度定位。纬度、经度和相位共同决定位置，让粒子分布呈现球面而非平面散点。
前后轨道分层绘制。同一条椭圆轨道拆成前后两段，配合层级让环绕关系更清楚。
控制开关直接作用于动画。复选框通过 :has() 改变播放状态和时间倍率，减少动态偏好也有对应样式。
CSS三角函数怎样计算球面与轨道
注册后的角度变量在关键帧之间连续插值，再交给 sin() 与 cos() 计算横向位置和深度。粒子的大小、亮度和透明度会随相位变化，轨道旅行者经过球体边缘时还会缩小、渐隐。它属于用 CSS 计算视觉空间的实验，球体并没有可以任意拖动的三维相机。
@property --flight { syntax: "<angle>"; inherits: true; initial-value: 0deg; }轨道粒子球的密度、倾角和配色如何调整
粒子的颜色、周期、纬度与经度在 index.html 的各元素变量中，主题色、球体比例和动画逻辑在 style.css。想降低密度，可以减少粒子节点；想更换轨道造型，可以调整倾角、压扁比例和周期。插入正文页面时，还要检查全屏布局对父级高度的要求。
纯CSS星球动画的兼容与交互范围
旧浏览器为什么不动或位置不对？
效果依赖 @property、CSS 三角函数和 :has() 等较新特性。建议使用新版浏览器并在目标设备预览，不支持时不能保证保留完整动画。
暂停按钮为什么不是独立脚本？
复选框状态由 CSS 选择器读取，勾选后直接暂停场景及其子元素动画。慢放同样通过统一时间倍率生效，页面没有持续运行的 JavaScript 动画循环。
可以像三维模型一样拖动吗？
当前不提供拖动旋转或镜头控制。它适合固定构图的氛围展示；若要自由观察，需要另行增加交互或改用三维渲染方案。
适合科技专题、加载氛围与 CSS 动画研究。完整球面分布和轨道分层写法可下载查看。
