html+css3太阳系行星运转动画效果的实现代码

接下来我将为你介绍如何实现 HTML 和 CSS3 制作太阳系行星运转动画效果，并提供两条示例说明。

HTML + CSS3 制作太阳系行星运转动画效果——完整攻略

第一步：HTML 结构

我们首先来创建 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>
<div class="orbit orbit-mercury"></div>
<div class="orbit orbit-venus"></div>
<div class="orbit orbit-earth"></div>
<div class="orbit orbit-mars"></div>
<div class="orbit orbit-jupiter"></div>
<div class="orbit orbit-saturn"></div>
<div class="orbit orbit-uranus"></div>
<div class="orbit orbit-neptune"></div>

在 HTML 结构中，我们先通过 div 元素创建了太阳、八大行星和八个轨道元素，其中八大行星分别对应着 mercury（水星）、venus（金星）、earth（地球）、mars（火星）、jupiter（木星）、saturn（土星）、uranus（天王星）和 neptune（海王星），轨道元素的 orbit 类名带有后缀 -mercury、-venus 等，以便我们在后续的 CSS 样式中针对不同的轨道进行区分。

第二步：CSS 样式

接下来，我们通过 CSS 样式来对这些元素进行布局、美化和动画。

/* 基础样式 */
body {
  background-color: #222;
}

.sun {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: yellow;
  position: absolute;
  left: calc(50% - 50px);
  top: calc(50% - 50px);
  animation: rotate-sun 30s linear infinite;
  z-index: 10;
}

.orbit {
  position: absolute;
  width: 800px;
  height: 800px;
  border-radius: 50%;
  border: 1px dashed #555;
  left: calc(50% - 400px);
  top: calc(50% - 400px);
}

 .mercury {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #888;
  position: absolute;
  top: 50%;
  margin-top: -6px;
  left: calc(50% - 410px);
  animation: rotate-mercury 7.5s linear infinite;
  z-index: 9;
}

.orbit-orbit-mercury {
  -webkit-animation: rotate-orbit-mercury 7.5s linear infinite;
  animation: rotate-orbit-mercury 7.5s linear infinite;
}

.venus {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #ED9797;
  position: absolute;
  top: 50%;
  margin-top: -10px;
  left: calc(50% - 440px);
  animation: rotate-venus 15s linear infinite;
  z-index: 8;
}

.orbit-orbit-venus {
  -webkit-animation: rotate-orbit-venus 15s linear infinite;
  animation: rotate-orbit-venus 15s linear infinite;
}

.earth {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: #5AD4D4;
  position: absolute;
  top: 50%;
  margin-top: -11px;
  left: calc(50% - 480px);
  animation: rotate-earth 24s linear infinite;
  z-index: 7;
}

.orbit-orbit-earth {
  -webkit-animation: rotate-orbit-earth 24s linear infinite;
  animation: rotate-orbit-earth 24s linear infinite;
}

.mars {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #F47775;
  position: absolute;
  top: 50%;
  margin-top: -9px;
  left: calc(50% - 520px);
  animation: rotate-mars 36s linear infinite;
  z-index: 6;
}

.orbit-orbit-mars {
  -webkit-animation: rotate-orbit-mars 36s linear infinite;
  animation: rotate-orbit-mars 36s linear infinite;
}

.jupiter {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #F2A76A;
  position: absolute;
  top: 50%;
  margin-top: -40px;
  left: calc(50% - 580px);
  animation: rotate-jupiter 72s linear infinite;
  z-index: 5;
}

.orbit-orbit-jupiter {
  -webkit-animation: rotate-orbit-jupiter 72s linear infinite;
  animation: rotate-orbit-jupiter 72s linear infinite;
}

.saturn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #F2BC6D;
  position: absolute;
  top: 50%;
  margin-top: -30px;
  left: calc(50% - 680px);
  animation: rotate-saturn 144s linear infinite;
  z-index: 4;
}

.orbit-orbit-saturn {
  -webkit-animation: rotate-orbit-saturn 144s linear infinite;
  animation: rotate-orbit-saturn 144s linear infinite;
}

.uranus {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background-color: #6FD5D3;
  position: absolute;
  top: 50%;
  margin-top: -22.5px;
  left: calc(50% - 750px);
  animation: rotate-uranus 288s linear infinite;
  z-index: 3;
}

.orbit-orbit-uranus {
  -webkit-animation: rotate-orbit-uranus 288s linear infinite;
  animation: rotate-orbit-uranus 288s linear infinite;
}

.neptune {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #6EACEB;
  position: absolute;
  top: 50%;
  margin-top: -20px;
  left: calc(50% - 800px);
  animation: rotate-neptune 576s linear infinite;
  z-index: 2;
}

.orbit-orbit-neptune {
  -webkit-animation: rotate-orbit-neptune 576s linear infinite;
  animation: rotate-orbit-neptune 576s linear infinite;
}

/* 动画 */
@keyframes rotate-sun {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes rotate-mercury {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes rotate-venus {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes rotate-earth {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes rotate-mars {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes rotate-jupiter {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes rotate-saturn {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes rotate-uranus {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes rotate-neptune {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes rotate-orbit-mercury {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes rotate-orbit-venus {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes rotate-orbit-earth {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes rotate-orbit-mars {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes rotate-orbit-jupiter {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes rotate-orbit-saturn {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes rotate-orbit-uranus {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes rotate-orbit-neptune {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

在 CSS 样式中，我们先进行基础样式的设置，包括 body 背景色等；然后针对太阳、行星和轨道等元素，使用相应的 CSS 样式进行布局、美化和动画等处理，其中涉及到了众多的动画。

第三步：完整代码及运行结果

最后，我们将 HTML 和 CSS 样式结合到一起，便可实现太阳系行星运转动画效果了。以下是完整代码和预览效果：

```html