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代码：

body {
  background: #000;
}

.sun {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #FDB813;
  position: absolute;
  left: calc(50% - 50px);
  top: calc(50% - 50px);
  box-shadow: 0px 0px 50px rgba(253,184,19,1);
  animation: sun 10s linear infinite;
}

.mercury {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #A9A9A9;
  position: absolute;
  top: calc(50% - 5px);
  left: calc(50% - 80px);
  transform-origin: 50% 200%;
  animation: mercury 3s linear infinite;
}

.venus {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #CD853F;
  position: absolute;
  top: calc(50% - 10px);
  left: calc(50% - 120px);
  transform-origin: 50% 200%;
  animation: venus 5s linear infinite;
}

.earth {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #1E90FF;
  position: absolute;
  top: calc(50% - 12.5px);
  left: calc(50% - 160px);
  transform-origin: 50% 200%;
  animation: earth 8s linear infinite;
}

.mars {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #FF4500;
  position: absolute;
  top: calc(50% - 7.5px);
  left: calc(50% - 200px);
  transform-origin: 50% 200%;
  animation: mars 10s linear infinite;
}

.jupiter {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #FF8C00;
  position: absolute;
  top: calc(50% - 25px);
  left: calc(50% - 280px);
  transform-origin: 50% 200%;
  animation: jupiter 12s linear infinite;
}

.saturn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #D2B48C;
  position: absolute;
  top: calc(50% - 20px);
  left: calc(50% - 380px);
  transform-origin: 50% 200%;
  animation: saturn 15s linear infinite;
}

.uranus {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #00BFFF;
  position: absolute;
  top: calc(50% - 15px);
  left: calc(50% - 480px);
  transform-origin: 50% 200%;
  animation: uranus 20s linear infinite;
}

.neptune {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #00CED1;
  position: absolute;
  top: calc(50% - 14px);
  left: calc(50% - 580px);
  transform-origin: 50% 200%;
  animation: neptune 25s linear infinite;
}

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

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

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

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

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

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

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

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

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

这段代码定义了一个太阳和九个行星，每个行星围绕太阳旋转，每个行星的速度不同。其中，关键是使用了CSS3的动画属性，通过不断改变元素的旋转角度和平移距离，实现了行星绕太阳旋转的效果。