CSS3九大行星绕太阳周转动画效果

以下是使用 CSS3 实现的九大行星绕太阳周转的动画效果：

HTML代码：

<div class="sun"></div>
<div class="mercury"></div>
<div class="venus"></div>
<div class="earth"></div>
<div class="mars"></div>
<div class="jupiter"></div>
<div class="saturn"></div>
<div class="uranus"></div>
<div class="neptune"></div>

CSS代码：

.sun {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #f9d71c;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  box-shadow: 0 0 50px #f9d71c, 0 0 100px #f9d71c, 0 0 150px #f9d71c, 0 0 200px #f9d71c;
  animation: rotate-sun 10s linear infinite;
}

.mercury {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #b5b5b5;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateX(70px);
  animation: rotate-mercury 3s linear infinite;
}

.venus {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: #f2b02e;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateX(120px);
  animation: rotate-venus 5s linear infinite;
}

.earth {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #3a7cff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateX(160px);
  animation: rotate-earth 8s linear infinite;
}

.mars {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: #ff4f4f;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateX(200px);
  animation: rotate-mars 10s linear infinite;
}

.jupiter {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #c05c3c;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateX(300px);
  animation: rotate-jupiter 20s linear infinite;
}

.saturn {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: #d8c58e;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateX(400px);
  animation: rotate-saturn 30s linear infinite;
}

.uranus {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #6ecfff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateX(500px);
  animation: rotate-uranus 40s linear infinite;
}

.neptune {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background-color: #3456a9;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateX(600px);
  animation: rotate-neptune 50s linear infinite;
}

@keyframes rotate-sun {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotate-mercury {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotate-venus {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotate-earth {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotate-mars {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotate-jupiter {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotate-saturn {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotate-uranus {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotate-neptune {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

解释一下代码：

1. `.sun` 代表太阳，使用 `border-radius: 50%` 将其设置为圆形，使用 `box-shadow` 添加光晕效果，使用 `animation` 添加旋转动画。
2. `.mercury` 到 `.neptune` 分别代表九大行星，使用不同的颜色、大小、位置和旋转速度等属性，使用 `animation` 添加旋转动画。
3. `@keyframes` 定义了动画执行的关键帧，从 `0%` 开始，旋转角度为 `0deg`，到 `100%` 结束，旋转角度为 `360deg`。
4. 通过设置 `translateX` 属性实现行星的位置偏移，从而实现绕太阳周转的效果。

这样就可以实现九大行星绕太阳周转的动画效果了。