怎样利用CSS关键帧动画实现太阳系行星轨道公转-css教程-PHP中文网

CSS实现行星绕日运动的关键是将行星置于旋转轨道容器中并设transform-origin为太阳坐标，配合反向自转、错开动画延迟、合理timing-function及overflow:hidden等细节。

怎样利用css关键帧动画实现太阳系行星轨道公转

用 `@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% 就是它自己的中心点，和太阳位置毫无关系。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

真正生效的是绝对坐标，比如太阳在容器中是 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）更稳