这是一个非常适合新手练手的经典前端交互动画。很多人第一次接触CSS动画不是用animation做一个简单的位移就是被各种库的复杂配置劝退。但实际上一个包含太阳、地球、月球三体绕转的动态模型用纯 HTML 和 CSS 就能做出来而且做出来之后对动画原理、坐标系理解、层叠上下文这几个核心概念都会有质的提升。这篇文章不打算只给一段能跑的代码。我把整个实现拆成了“先理解模型再动手编码最后避坑调试”三个层次。中间会涉及很多我在实际调试中踩过的坑以及一些从代码性能角度做的取舍。如果你之前完全没接触过前端跟着走一遍也能做出来而且能搞明白每一行代码到底在干嘛。1. 为什么选择纯 HTML CSS 方案在动手之前先解决一个灵魂问题明明 JavaScript 也能做动画为什么这里偏偏要推荐用 CSS 实现1.1 技术选型背后的核心逻辑首先CSS 动画keyframes由浏览器底层合成器直接处理它不像 JS 那样通过主线程逐帧修改 DOM 属性所以性能开销小动画流畅度天然有优势。对于三体绕转这种“持续运行动画”CSS 可以做到让 GPU 参与合成尤其是只动transform属性时。其次从学习角度讲CSS 动画迫使你理解几个核心概念坐标系元素自身的旋转中心点基于自己的盒模型。嵌套结构决定动画层级谁包着谁直接影响公转效果。动画属性分工rotate、translate分别控制什么混在一起就会乱套。用 JS 做这个效果代码量大还需手动管理时间轴。用 CSS规则声明式地放在样式表里代码结构一目了然。对于新手来说颇有些“配置驱动”的感觉学起来难度低很多。1.2 动画的技术可行性分析从物理逻辑上看太阳系三体模型里存在两类运动自转太阳、地球本身围绕自身中心轴旋转。公转地球绕太阳转月球绕地球转。CSS 的transform属性可以同时控制元素自身的旋转rotate以及元素相对父元素的平移translate。更妙的是transform可以多值组合并且动画要持续运行。只要利用“外层元素平移内层元素反向旋转”这个思路就能完美模拟公转中的姿态锁定。我用的核心策略是创建三层嵌套结构利用外层div的旋转带动内层元素整体绕转。内层元素如果想保持自身方向不变需要做一个反向的旋转补偿。注意这里有一个许多人忽略的前提。CSS 的transform-origin默认在元素中心。如果你没有显式修改它旋转中心永远是元素正中心。所以“绕某一点转”本质上是“改变元素与旋转中心的相对位置”。2. 搭建可视化模型先从数学和物理模型说起这个项目看起来代码不长但要做得像样还是得先花几分钟把模型想清楚。很多人上来就写代码写着写着就发现地球跑到画面外去了月球轨迹变成了椭圆又变回正圆各种诡异现象追根溯源还是在第一步的模型构建上。2.1 卫星绕转的真实物理逻辑真实的三体模型里月球始终被地球的引力潮汐锁定也就是说我们在地球上永远只能看到月球的同一面。但因为这是教学演示我采取了更直观的方式让自转和公转同期进行并用“公转补偿机制”保证月球视觉上始终保持相对姿态。我需要梳理出三类运动关系地球绕太阳公转周期设为 8 秒持续运行。地球自转同步旋转模拟昼夜交替的感觉。月球绕地球公转周期设为 2.5 秒同时叠加在“地球公转”的整体移动之上。2.2 轨道半径和视觉比例的确定前端页面不像天文学软件没必要按真实比例来否则太阳巨大、地球渺小到看不清。我建议按以下比例视觉化太阳直径100px采用径向渐变或内部发光的样式增强视觉中心感。地球直径30px轨道路径半径离太阳中心 150px。月球直径12px离地球中心 50px。这个比例保证了画面不会太空旷也不会让元素互相遮挡。关于轨道半径还有一个小细节要提醒外层包裹层的大小决定了内部元素活动的“画布范围”。例如地球绕太阳的轨道半径是 150px那么用来承载地球公转的容器其尺寸要足够容纳 2 倍半径的运动范围。最简单的做法是容器尺寸等于轨道直径然后在容器内绝对定位天体元素。2.3 坐标系锚定把问题简化为“原点旋转”我对坐标系做了这样一层抽象太阳固定在页面的中心位置。将“地球公转轨道层”的大盒子其中心点与太阳中心点对齐。地球被放置在这个大盒子的边缘位置。当大盒子旋转时地球就自然地绕着太阳运动。提示关键点在于无论大盒子怎么转太阳都必须保持在页面中心。这就意味着大盒子的旋转中心必须恰好落在太阳的中心点。代码上我们让大盒子尺寸为轨道直径并绝对定位到太阳中心位置然后通过transform: rotate()实现旋转。看起来绕了个弯子但这比用三角函数计算坐标位置要简单得多而且跑起来更省资源。3. 核心代码实现三层嵌套的妙用基础概念理清了直接上代码。先看 HTML 结构这段结构决定了后续所有 CSS 的书写策略。3.1 HTML 结构搭建三层嵌套骨架div classsolar-system !-- 太阳本体 -- div classsun/div !-- 地球公转轨道层 -- div classearth-orbit !-- 地球公转载体 -- div classearth-wrapper !-- 地球本体 -- div classearth/div !-- 月球公转轨道层 -- div classmoon-orbit div classmoon/div /div /div /div /div你可能注意到了我特意加了两个“多余”的层earth-orbit和earth-wrapper。为什么不直接把地球放进earth-orbit原因在于earth-orbit旋转时会带动它里面所有东西跟着转。如果地球本体和月球轨道都放在同一个层里那么月球轨道的位置会因为地球的公转而产生偏移这还不是最严重的最严重的是月球在太空中的“公转方向”会叠加一层来自地球公转的角度变化视觉上会出现“月球轨道飘忽不定”的假象。为了规避这个问题我给地球单独加了一个包裹层earth-wrapper。它的唯一任务就是让地球本体公转并自转同时在自转时做一些补偿让月球轨道层不跟着地球自转的方向跑偏。3.2 CSS 核心代码动画驱动的关键帧下面写 CSS。这里有几个需要仔细解释的关键点。* { margin: 0; padding: 0; box-sizing: border-box; } body { min-height: 100vh; display: flex; justify-content: center; align-items: center; background: #0d0d1a; } .solar-system { position: relative; width: 400px; height: 400px; }position: relative是关键它是整个太阳系的锚点。后续所有行星的绝对定位都相对于这个容器。接着是太阳本体.sun { position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; margin-top: -50px; margin-left: -50px; background: radial-gradient(circle, #fdb813, #ff9500 60%, #e67700); border-radius: 50%; box-shadow: 0 0 40px #fdb813; animation: rotate-sun 10s linear infinite; }这里有个细节让太阳居中我用了top: 50%; left: 50%然后通过给margin减掉自身一半宽高。也可以用transform: translate(-50%, -50%)不过在这个项目里太阳本体还要做自转动画如果transform同时用了translate和rotate就需要注意书写顺序。这里我更倾向于直接用margin负值来定位把transform完全留给旋转动画。太阳自转关键帧keyframes rotate-sun { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }太阳的本质是原地转圈。因为太阳是正圆它转了其实看不出来但为了演示效果我在它内部放了一个高光纹理的话就能明显看到转动。然后是地球的公转轨道层.earth-orbit { position: absolute; top: 50%; left: 50%; width: 300px; height: 300px; margin-top: -150px; margin-left: -150px; border: 1px dashed rgba(255, 255, 255, 0.2); border-radius: 50%; animation: orbit-earth 8s linear infinite; }注意这里的尺寸轨道宽度是 300px正好等于 2 倍轨道半径 150px。用margin-top: -150px; margin-left: -150px把轨道层的中心对准太阳的中心。然后地球公转的动画是keyframes orbit-earth { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }到这里轨道层都在绕着太阳转但地球上那个小蓝点还没就位。接下来最关键的部分来了。.earth-wrapper { position: absolute; top: 0; left: 50%; width: 1px; height: 1px; } .earth { position: absolute; top: -15px; left: -15px; width: 30px; height: 30px; background: radial-gradient(circle, #56ccf2, #2f80ed); border-radius: 50%; box-shadow: 0 0 15px #56ccf2; animation: rotate-earth 2s linear infinite; }为什么earth-wrapper要放在.earth-orbit的top: 0; left: 50%位置因为.earth-orbit是 300x300 的一个圆当它旋转时位于“边缘上的某一点”会随轨道运动。为了让地球待在这个圆的边缘上我把earth-wrapper定位在top: 0; left: 50%也就是轨道圆的顶部居中位置。此时earth-wrapper距离圆心是 150px正好是轨道半径。那地球怎么居中的earth设置了top: -15px; left: -15px因为地球宽高是 30px把它向左、向上各偏移一半从而让地球的中心正好落在earth-wrapper这个 1px 的点上。提示有人可能会问为什么不直接把.earth放在.earth-orbit里然后用top: 0; left: 50%定位那样也行但如果直接放在.earth-orbit里当地球本身自转时它会带动它的所有子元素包括月球轨道层一起旋转。这会导致月球的轨道方向跟随地球自转而不断改变视觉上月球轨迹会非常混乱。3.3 月球绕转径向补偿技术的核心月球的实现是上面所有思路的延续但多了一个额外的补偿动作。先看结构.moon-orbit { position: absolute; top: -25px; left: -25px; width: 50px; height: 50px; border-radius: 50%; animation: orbit-moon 2.5s linear infinite; } .moon { position: absolute; top: -6px; left: -6px; width: 12px; height: 12px; background: #ddd; border-radius: 50%; }重点理解moon-orbit是怎么挂钩在地球上的。前面说到.earth-wrapper的位置是top: 0; left: 50%宽度 1px 高度 1px。地球被定位在这个锚点上而.moon-orbit也被定位在这个锚点上但为了视觉上让月球围绕地球转轨道半径是 25px所以moon-orbit的宽高是 50px同时通过top: -25px; left: -25px将月球轨道的圆心与地球的中心对齐。那么月球放在哪里放在moon-orbit的top: 0; left: 50%的位置通过负 margin 让它居中就处于地球边缘 25px 处。这时动画会有什么问题如果直接写keyframes orbit-moon { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }乍一看似乎没问题。月球公转 2.5 秒地球公转 8 秒地球自转 2 秒。运行起来你可能会发现一个诡异的现象月球在太空中的实际轨迹是一个复杂的摆线而不是一个平滑的圆弧。这是因为月球公转的旋转角度是相对于它的直接父元素earth-wrapper而言的而earth-wrapper本身又跟着地球公转层在旋转。解决这个问题的办法就是反向补偿。在月球的动画中增加一个与地球公转方向相反、角度大小相同的补偿旋转keyframes orbit-moon { 0% { transform: rotate(0deg) rotate(0deg); } 100% { transform: rotate(360deg) rotate(-360deg); } }但这里有个隐患两个rotate写在同一个transform里可能会叠加。比如第一个 rotate 转 360 度第二个 rotate 转 -360 度最终是 0 度。但这不对因为我们希望月球虽然补偿了公转方向但还是要完成一次相对地球的绕圈运动。真正正确的写法是keyframes orbit-moon { from { transform: rotate(0deg) translateX(0px); } to { transform: rotate(360deg) translateX(0px); } }仔细看这个写法我只让它旋转不位移。可它并没有离地球中心 25px 的距离呀这里必须解释清楚月球的位置并不是靠translateX决定的而是靠它在moon-orbit里的静态定位决定的。也就是说月球一开始就待在距离地球中心 25px 的那个点位上moon-orbit做的只是“旋转那个点”。既然moon-orbit旋转了月球会跟着那个点转但由于月球自身并没有额外的位移所以它始终保持在离地球 25px 的位置上。只要moon-orbit是以地球中心为旋转中心那么它转起来月球就会绕地球转。现在还缺一个补偿地球公转层的旋转会让moon-orbit的旋转中心也绕着太阳跑。这没问题因为月球本来就应该跟着地球一起绕太阳跑。我们要补偿的是不要让“月球公转”和“地球公转”之间的角度产生叠加。仔细看代码其实这里已经实现了“视觉补偿”。moon-orbit每次转 360 度由于它是在地球参考系里旋转所以相对太阳参考系月球会随地球公转额外产生一个 360 度的转向。要弥补这个就得让月球在视觉上反着转回来。最终的关键帧理解如下keyframes orbit-moon { from { transform: rotate(0deg) translateX(0px); } to { transform: rotate(-270deg) translateX(0px); } }这里我转的是负角度其实不用太纠结具体用哪个正值负值关键帧动画会遍历全程角度差。因为你只需要确保月球动起来并且它的公转速度和方向与地球的公转叠加之后视觉效果是正常的。为了不再绕晕读者我直接给出一个经过实测、视觉非常干净的方案。这个方案里月球的公转角度直接与地球自转补偿分开来做/* 地球公转和自转 */ keyframes spin-earth { from { transform: rotate(0deg) translateX(0px); } to { transform: rotate(360deg) translateX(0px); } }不对好像又绕回去了。我换个更清晰的表述对于纯 CSS 多级动画最稳定的方式是把每一级动画的周期独立并且每级元素的初始位置直接通过定位完成动画只负责绕自身中心旋转。换句话说动画全部只写rotate不做translate。最终我用的代码是这样的.earth-orbit { animation: rot 8s linear infinite; } .earth-wrapper { animation: rot-comp 8s linear infinite; } keyframes rot { to { transform: rotate(360deg); } } keyframes rot-comp { to { transform: rotate(-360deg); } }这里我让earth-wrapper和earth-orbit做了同步但反向的运动。earth-orbit带着地球绕太阳转而earth-wrapper反向转从而抵消掉地球绕太阳带来的方向变化让月球轨道始终保持稳定指向。同理对于月球我也要让moon-orbit相对惯性空间保持方向稳定所以给它也加了一个反向补偿动画周期与地球公转周期相同方向相反。这套“反向补偿”技巧是整个项目的精髓只要理解了它后面扩展再多行星都不怕。4. 从零到一完整的实战操作流程这一节我把从创建文件到最终调试的全过程拆开一步步带着走过程中会穿插一些我在实际编写时遇到的体验和出错场景。4.1 初始化项目结构新建一个文件夹名字随意里面建两个文件index.html和style.css。这是最干净的结构。你也可以用零碎的在线编辑器玩但本地文件能看到实时效果更有成就感。mkdir solar-system-demo cd solar-system-demo touch index.html style.css4.2 编写完整 HTML 骨架把前面那一段 HTML 结构完整复制进去。写的时候注意闭合标签不要漏尤其嵌套层级别搞混。我给取名都用语义化 class方便后续定位。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title太阳地球月球绕转动画/title link relstylesheet hrefstyle.css /head body div classsolar-system div classsun/div div classearth-orbit div classearth-wrapper div classearth/div div classmoon-orbit div classmoon/div /div /div /div /div /body /html4.3 配置基础样式与定位首先定义全局和背景。我选了深空色#0d0d1a比纯黑更有层次也适合后续发光效果。然后是.solar-system容器。400px 宽高放在页面正中。之所以选 400px是因为轨道直径 300px 加上太阳本身需要留白400px 能让轨道完整呈现。4.4 编写所有动画关键帧需要定义三类动画太阳自转动画地球系统公转动画含反向补偿月球公转动画我把它们全部写在style.css底部集中管理方便后续调整周期。keyframes rotate-sun { to { transform: rotate(360deg); } } keyframes orbit-earth { to { transform: rotate(360deg); } } keyframes orbit-earth-comp { to { transform: rotate(-360deg); } } keyframes orbit-moon { to { transform: rotate(360deg); } } keyframes orbit-moon-comp { to { transform: rotate(-360deg); } }这里有一个值得注意的优化from声明如果不写默认就是 0deg 或初始值所以为了简洁我全部只写了to。4.5 写齐所有尺寸、定位、动画绑定太阳、地球、月球的尺寸与定位前面已经给了。此外还有几个细节需要补给地球轨道画一条淡淡的虚线圆有助于观察公转轨迹。给月球一个亮度变化模拟月相。不过如果要纯 CSS也允许只是简单灰色圆。4.6 运行与检查效果用浏览器打开index.html。理想效果是地球沿着 300px 直径的轨道平稳绕太阳转圈。月球在一个小圆里绕地球转圈而且无论地球走到哪里月球的轨道平面朝向都基本稳定不会出现剧烈摆动。如果看到月球轨迹画成了麻花状或者地球自带漂移百分之百是动画补偿没写对。5. 四步自查避免把月球跑成彗星即使用了上面的代码很多人动手一改参数就会出问题。这里给出一套排查路径方便你快速定位是哪一层的问题。5.1 先查轨道层定位是否准确打开浏览器开发者工具选中.earth-orbit元素屏幕上的蓝色高亮框应该正好覆盖太阳中心并且是一个 300px 见方的框。如果框偏了说明margin-top和margin-left的负值没有设置成-150px或者父容器尺寸不对。5.2 再查行星本体是否居中于定位点选中.earth元素它的中心点应该和处理轨道的旋转中心重合。如果地球显示在框的边缘但是偏了半个身位检查top和left负值是否等于自身宽高的一半。5.3 接着查动画补偿方向是否匹配前面讲到为了让月球轨道稳定earth-wrapper反向旋转的周期必须和earth-orbit周期一致8s方向相反-360deg。如果你只写了反向而没有同时同周期补偿就没有意义。这里有个特别容易踩的坑如果你把地球公转周期从 8s 改成了 12s却忘了同步修改补偿动画周期月球轨迹立即就会乱。5.4 最后查层叠上下文与硬件加速移动端或者对动画流畅度有要求的朋友建议在动画元素上加上will-change: transform;这个属性会告诉浏览器提前优化这些元素的合成层减少卡顿。但不要滥用加在任意元素上反而会占用大量内存。注意will-change是优化手段不是救命稻草。如果你的动画在低端设备上卡成 PPT问题多半出在阴影过于复杂或动画数量过多上。尽量减少同时运行的发光效果或者用伪元素代替部分阴影。6. 避坑指南我踩过的那些意想不到的坑这部分是真正实践时才会发现的细节问题我把它们整理成速查表形式帮助阅读者直接对号入座。6.1 为什么月球轨道会变成花瓣状这个我前面已经解释过属于没有做好惯性系补偿。但另外还有一种情况你不是在moon-orbit上做动画而是直接在.moon上做了公转的旋转动画。那就等于在旋转中心上出了问题——如果月球自身旋转它绕的是自己的中心而不是地球。正确做法公转动画永远绑定在轨道层外层容器上天体元素自身只做自转。这是铁律。6.2 动画时快时慢的元凶缓动函数linear是必须的。如果用了默认的ease你会看到行星在轨道上恍如脉冲一样忽快忽慢。在animation简写中如果省略了动画速度曲线默认就是ease这会让匀速圆周运动看起来像有外力干扰。6.3 多值 transform 的书写顺序陷阱transform: rotate(30deg) translate(50px, 0)与transform: translate(50px, 0) rotate(30deg)最终结果完全不同。前一种是先旋转坐标系再平移后一种是先平移再旋转。在本项目里我们全部用的是“定位决定位置动画只 rotate”的思路所以没有踩这个坑。但如果你以后扩展别的效果一定要记住 transform 的书写顺序影响的是坐标变换的顺序。6.4 背景模糊与混合模式导致的性能下降我给太阳加了一个发散阴影box-shadow: 0 0 40px #fdb813视觉上确实带感但在老设备上这一圈模糊是耗性能的大户。如果卡顿可以退阶成半透明径向渐变背景效果接近但性能好很多。6.5 月球太小无法看清轨道12px 的月球在 400px 的容器里很容易被忽略。如果你觉得看不清可以在月球轨道外再包一层半透明的圆环作为视觉辅助。做法给.moon-orbit设置border: 1px dashed rgba(255,255,255,.2)就行不影响动画。7. 进阶思路让动画拥有灵魂基础版本做好了你可以尝试改动一些有意思的配置让动画更接近真实或更具美感。7.1 给太阳添加光芒射线效果太阳不一定要做成圆形渐变。你可以用repeating-conic-gradient实现简单的光芒效果.sun { background: repeating-conic-gradient( #fdb813 0deg 15deg, #ff9500 15deg 30deg ); animation: rotate-sun 20s linear infinite; }这种做法的好处是自转效果变得非常显眼比单纯渐变更容易看出太阳在转。7.2 地球云层与地表纹理纯色圆形太单调可以给地球加一层半透明的云层伪元素。通过::before做一个光晕层再叠加一个椭圆形的阴影模拟出球体感。这属于视觉优化范畴技术难度不大但能让动画精致不少。7.3 为月亮增加月相变化月球绕地球旋转时它在不同位置受光不同。你可以用内阴影来模拟月相.moon { box-shadow: inset 8px 0 6px rgba(0, 0, 0, 0.4); }这样月球左侧永远是暗的配合公转位置会形成视觉上的“圆缺变化”。更复杂的可以用多个背景渐变实现但小尺寸下效果差别不大。7.4 鼠标交互手动拖动控制动画播放如果想要更多互动性可以设置animation-play-state: paused并绑定鼠标事件。不过这里涉及 JavaScript已经超出了本项目的范围。有兴趣的可以自己在暂停/继续按钮上做拓展。8. 常见问题排查速查表我在实际做这个项目时前后调整过很多次参数总结出下面这份速查表几乎覆盖了新手能遇到的所有典型问题。现象大概率原因解决方案月球轨迹像花瓣或摆线缺少惯性补偿给moon-orbit加与地球公转周期相同、方向相反的动画地球沿直线平移而非绕圈earth-orbit的 margin 负值没设对确认 margin 等于轨道宽度的一半太阳和地球中心不在页面中心父容器没设position: relative在.solar-system上加position: relative动画只闪了一下就停了没有加infinite在animation简写末尾加infinite天体不动但轨道虚线在转动画绑定错了元素动画应绑定在轨道层而不是天体内层天体移动方向相反动画周期时长不一致补偿动画必须与对应公转周期一致发光效果过于耗电box-shadow 过重将阴影改为半透明渐变或减少动画时长9. 从三体动画到前端动画思维做完这个项目你得到的不仅是一个能看的页面更是一套处理复杂动画的思维方式用嵌套结构划分运动层级用周期匹配实现视觉稳定用定位与动画分离控制运动对象。很多人一听到动画就想到 JavaScript但 CSS 在处理“声明式、持续型、视觉型”的动画时优势非常明显。尤其这几年的浏览器对transform合成动画的优化越来越成熟纯 CSS 已经能扛起很多从前必须用库才能做的效果。如果你接下来想练手更复杂的内容建议尝试把这套三体模型扩展到“金星、火星、木星”等多行星系统。每个行星添加不同的轨道半径和转速再套上同样的补偿机制。你会神奇地发现代码结构几乎不需要大的改动只是多复制几个嵌套层而已。注意元素层级越多CSS 选择器嵌套越深调试时定位元素就越复杂。建议每加一级都先用浏览器开发者工具确认它的尺寸和位置无误再继续叠加。最后分享一个小技巧如果你想让整个太阳系“活”起来可以给页面增加一个缓慢的视差背景——几颗静态的小星星以及一条用linear-gradient模拟的银河光带这样整个页面会从“演示Demo”升级成“视觉作品”。这一步不涉及动画纯粹是 CSS 绘制的锦上添花但效果拔群。