中秋献礼，分享一个CSS日地月公转动画效果！

引言

中秋佳节即将来临，为庆祝这一传统节日，本文将分享一款CSS日地月公转动画效果，让我们一起来感受天文奥妙和节日气氛的融合吧！

动画效果演示

首先，让我们先来欣赏一下该动画效果的演示：

演示地址：http://www.htmleaf.com/3066/css3-solar-system/codes/demo.html

该动画效果实现了日地月三体的公转运动，并且能够自适应屏幕大小。同时，还添加了恒星和星云的背景，以及流畅的动画效果，给人以视觉上的享受和震撼。

动画效果实现

接下来，我们将来看一下该动画效果的实现原理和代码实现。首先，我们需要定义基础的HTML结构和CSS样式。

<!-- HTML结构 -->
<div id="container">
  <div class="sun"></div>
  <div class="earth-orbit">
    <div id="earth">
      <div class="moon-orbit">
        <div id="moon"></div>
      </div>
    </div>
  </div>
</div>
/* CSS样式 */
#container {
  width: 240px;
  height: 240px;
  margin: 50px auto;
  position: relative;
}
.sun {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #FDB813;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -10px;
  margin-top: -10px;
  z-index: 2;
}
.earth-orbit {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 1px solid #DDD;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -100px;
  margin-top: -100px;
  z-index: 1;
  animation: earth-orbit 6s linear infinite;
}
#earth {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #33B5E5;
  position: absolute;
  left: 50%;
  top: 0;
  margin-left: -10px;
  z-index: 2;
  animation: earth-rotation 6s linear infinite;
}
.moon-orbit {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -20px;
  margin-top: -20px;
  z-index: 1;
  animation: moon-orbit 6s linear infinite;
}
#moon {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #CCC;
  position: absolute;
  left: 50%;
  top: 0;
  margin-left: -2.5px;
  z-index: 2;
  animation: moon-rotation 2s linear infinite;
}

上述代码中，我们使用了三个div元素来表示“太阳”、“地球”和“月球”，并且通过CSS样式进行了初始化。接下来，我们将使用CSS3动画和变形来实现日地月公转的动态效果。

太阳（Sun）

首先，我们来看一下太阳的初始化样式：

.sun {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #FDB813;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -10px;
  margin-top: -10px;
  z-index: 2;
}

这里，我们定义了太阳的初始大小、形状、颜色等样式，并将其设为绝对定位的元素，同时指定了其居中的位置和z-index属性的值。

为了实现太阳的自转效果，我们可以使用CSS3的动画来实现。具体代码如下：

.sun {
  /* 前面的样式代码省略 */
  animation: sun-rotation 30s linear infinite;
}
@keyframes sun-rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

这里，我们使用CSS3动画来定义了太阳的自转速度和方式。具体来说，我们使用了keyframes关键字来指定动画的开始和结束状态，然后定义了一个rotate变形来对太阳进行旋转。最后，我们将该动画应用到sun选择器上，使用了animation属性，并设置了动画的时间、速度、方式和执行次数等参数。

地球（Earth）

接下来，我们来看看地球的相关样式代码。首先，我们来看一下地球的初始化代码：

#earth {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #33B5E5;
  position: absolute;
  left: 50%;
  top: 0;
  margin-left: -10px;
  z-index: 2;
  animation: earth-rotation 6s linear infinite;
}

这里，我们定义了地球的初始大小、形状、颜色等样式，并将其设为绝对定位的元素，居中放置在太阳上方，同时指定了其居中的位置和z-index属性的值。为了实现地球的公转和自转效果，我们需要使用两个CSS3动画和变形来分别实现。

地球公转

地球公转的动态效果实际上就是在地球上添加一个围绕太阳转的圆形轨道，并对其进行动画的演示。相关样式代码如下：

.earth-orbit {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 1px solid #DDD;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -100px;
  margin-top: -100px;
  z-index: 1;
  animation: earth-orbit 6s linear infinite;
}
@keyframes earth-orbit {
  from {
    transform: rotate(0deg);
    }
  to {
    transform: rotate(360deg);
  }
}

这里，我们定义了一个div元素来表示地球的公转轨道，并在其中使用了CSS3动画来定义其围绕太阳旋转的方式和速度。具体来说，我们使用了keyframes关键字来指定动画的开始和结束状态，然后定义了一个rotate变形来对轨道进行旋转。最后，我们将该动画应用到earth-orbit选择器上，并设置了动画的时间、速度、方式和执行次数等参数。

地球自转

地球自转的动态效果其实就是对地球本身进行旋转的，具体实现代码如下：

#earth {
  /* 前面的样式代码省略 */
  animation: earth-rotation 6s linear infinite;
}
@keyframes earth-rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

这里，我们使用了一个与太阳自转动画类似的CSS3动画，并应用到了earth选择器上，同时指定了动画的时间、速度、方式和执行次数等参数。

月球（Moon）

最后，我们需要实现月球的动态效果。为了实现月球的公转和自转效果，我们需要使用两个CSS3动画和变形来分别实现。

月球公转

月球公转的动态效果实际上就是在月球上添加一个围绕地球转的圆形轨道，并对其进行动画的演示。相关样式代码如下：

.moon-orbit {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -20px;
  margin-top: -20px;
  z-index: 1;
  animation: moon-orbit 6s linear infinite;
}
@keyframes moon-orbit {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

这里，我们定义了一个div元素来表示月球的公转轨道，并在其中使用了CSS3动画来定义其围绕地球旋转的方式和速度。具体来说，我们使用了keyframes关键字来指定动画的开始和结束状态，然后定义了一个rotate变形来对轨道进行旋转。最后，我们将该动画应用到moon-orbit选择器上，并设置了动画的时间、速度、方式和执行次数等参数。

月球自转

月球自转的动态效果其实就是对月球本身进行旋转的，具体实现代码如下：

#moon {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #CCC;
  position: absolute;
  left: 50%;
  top: 0;
  margin-left: -2.5px;
  z-index: 2;
  animation: moon-rotation 2s linear infinite;
}
@keyframes moon-rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

这里，我们使用了一个与地球自转动画类似的CSS3动画，并应用到了moon选择器上，同时指定了动画的时间、速度、方式和执行次数等参数。

总结

通过本文的介绍，我们了解了如何使用CSS3动画和变形来实现日地月公转的动态效果。实际上这只是一个简单的示例，如果我们将其应用到更加复杂的场景中，就能够创造出更加生动、逼真的视觉效果。希望本文能够对广大前端爱好者有所启发，让大家在前端开发工作中掌握更加丰富、多样的技术手段，不断提升自己的技术水平。