前言

太阳、地球、月球应该是我们人人都比较了解的天体，它们的运动轨迹是我们研究星系乃至宇宙的重要信息之一。那么我们如何使用HTML + CSS来模拟这么一个效果呢？

运动轨迹。

简单的来说就是转圈。

// 定义轨迹
@keyframes rotate {
  from {
    transform: rotateZ(0);
  }
  to {
    transform: rotateZ(360deg);
  }
}

定义太阳

/* 定义一个太阳 */
.sum {
  position: relative;
  margin: 100px auto 0;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(
    circle at center,
    #ff9b9b 0%,
    rgba(235, 36, 64, 0) 70%
    );
}

定义地球

地球绕太阳一圈的时间是365.24天左右，这被称为一年。每年有一个额外的日子被称为闰年，这一年会有366天，目的是为了弥补地球绕太阳的公转周期与我们日历的定义周期之间的不匹配。

/* 定义地球位置及公转信息 */
.earth {
  position: absolute;

  /* 定义地球与太阳的相对位置以及轨道线 */
  width: 300px;
  height: 300px;
  margin-left:-50px;
  margin-top:-50px;
  border:1px solid #dddddd;
  border-radius:50%;

  /*动画： 设定公转时间以及轨迹 */
  animation: rotate 36.524s infinite linear;
}
/* 地球本体 */
.earth::before{
  content: ' ';
  position:absolute;
  background-color: blue;
  width: 30px;
  height: 30px;
  margin-left:70px;
  border-radius: 30px;
}

定义月球

月球绕地球一圈的时间大约是27.32天。这被称为一个月（也称为地月周期）。月亮的运动轨迹略呈椭圆形，因此月球与地球的距离会随时间而变化，这也导致月球的运动速度略有不同，有时会更快，有时会更慢，但平均值仍然是27.32天左右。

/* 定义月球位置及公转信息 */
.moon {
  position: absolute;

  /* 定义月球与地球的相对位置以及轨道线 */
  width: 60px;
  height: 60px;
  margin-left:55px;
  margin-top:-15px;
  border:1px solid #dddddd;
  border-radius:50%;

  /*动画： 设定公转时间以及轨迹 */
  animation: rotate 2.732s infinite linear;
}

/* 月球本体 */
.moon::before{
  content: ' ';
  position:absolute;
  background-color: blue;
  width: 10px;
  height: 10px;
  margin-left:7px;
  border-radius: 10px;
}

html结构 / 天体结构

<div class="sum">
  <div class="earth">
      <div class="moon"></div>
  </div>
</div>

最终效果