CSS实现行星绕日运动的关键是将行星置于旋转轨道容器中并设transform-origin为太阳坐标，配合反向自转、错开动画延迟、合理timing-function及overflow:hidden等细节。
用 @keyframes 定义行星绕太阳的圆周运动路径
关键不是“画个圈”，而是让元素在固定半径上做周期性位移。纯 CSS 无法直接写三角函数，所以得靠 transform: translateX() 和 translateY() 拼出近似圆轨迹——但更可靠的做法是：把行星放在一个旋转的轨道容器里，自身再反向旋转抵消自转漂移。
常见错误是直接对行星设 rotate(360deg)，结果它绕自己中心转，不是绕太阳转。必须配合 transform-origin 把旋转基点移到太阳位置（比如 transform-origin: 400px 400px），且容器需设 position: relative，行星设 position: absolute。
- 轨道半径越大，
transform-origin坐标值就得越准，建议统一用容器宽高一半作参考点 - 若用
rotateZ()+translate()组合，注意顺序：transform: rotateZ(...) translate(...)和反过来效果完全不同 - 动画时间要按真实公转比例缩放（如地球1年 ≈ 30s，水星88天 ≈ 12s），否则视觉上所有行星挤在一起转
animation-timing-function 影响行星速度是否“像真”
真实行星公转不是匀速的——开普勒第二定律说：离太阳越近，线速度越快。CSS 的 ease-in-out 或自定义 cubic-bezier(.42,0,.58,1) 只能模拟轻微加速/减速；真要拟合椭圆轨道速度变化，单靠 CSS 关键帧很难精确表达。
多数教程用 linear 是因为简单可控，但会暴露两个问题：一是轨道看起来太机械，二是多行星同步播放时缺乏层次感。
立即学习“前端免费学习笔记（深入）”；
- 给不同行星配不同
animation-timing-function：内侧行星用cubic-bezier(.2,0,.8,1)稍加起伏，外侧用linear - 避免所有动画都从
0%同时启动，加负的animation-delay（如-2s）错开起始相位，视觉更自然 -
animation-iteration-count: infinite必须显式声明，否则默认只播一次，行星转半圈就停了
为什么 transform-origin 坐标容易写错
很多人写 transform-origin: 50% 50%，以为就是容器中心——但这是相对于元素自身尺寸的百分比，不是相对于父容器。如果行星 div 是 10px × 10px，50% 50% 就是它自己的中心点，和太阳位置毫无关系。
真正生效的是绝对坐标，比如太阳在容器中是 left: 395px; top: 395px;，那每个行星都要设 transform-origin: 395px 395px，且这个值必须和容器 width/height 及 margin 严格对齐。
- 推荐用 CSS 自定义属性统一管理：比如
:root { --sun-x: 400px; --sun-y: 400px; }，然后行星写transform-origin: var(--sun-x) var(--sun-y); - 如果容器用了
scale()缩放，transform-origin坐标不会自动缩放，得手动换算 - 移动端 viewport 缩放或 zoom 变化时，
px值可能失效，此时改用视口单位（如vw）更稳
轨道线、阴影、层级这些细节决定是否“像那么回事”
纯动画不加轨道线，用户根本看不出是绕着什么转；不处理遮挡，火星可能盖住太阳；没有光晕，太阳就只是个亮色圆块。
这些不是锦上添花，而是建立空间关系的必要线索。尤其当多个行星共用同一层叠上下文（z-index 相同）时，渲染顺序完全由 HTML 结构决定——太阳必须写在最前面，否则会被后面追上的行星挡住。
- 轨道线用
border: 1px dashed rgba(255,255,255,.2)，别用box-shadow模拟，后者模糊且耗性能 - 行星加
box-shadow: 0 0 12px rgba(255,255,255,.4)模拟大气辉光，比单纯背景色更立体 - 太阳必须设
z-index: 10，所有行星设z-index: 1，否则靠近太阳时会“穿模”
overflow: hidden：没加这句，行星飞到边界外会漏出残影，整个动画就破功了。 
