css动画模拟太阳地球月球运动轨迹示例

CSS动画可以通过优雅的代码实现复杂的效果展示，如太阳系的运动轨迹。以下是实现CSS动画模拟太阳、地球、月球运动轨迹的攻略。

实现思路

1. 在HTML结构中定义太阳、地球、月球的标签。
2. 使用CSS设置容器的位置和大小，并设置其为相对定位。
3. 设置每个太阳系实体的大小、颜色、位置和运动轨迹等各项属性。
4. 在动画中使用CSS的关键帧（@keyframes）实现运动效果。
5. 添加多个关键帧，形成循环动画效果。

示例说明

示例一：太阳系基础动画

在示例中，太阳、地球和月球构成基础的太阳系模拟动画。

HTML 结构

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

CSS 样式

.sun {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-color: yellow;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.earth {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: blue;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: rotate-earth 10s infinite linear;
}
.moon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: grey;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: rotate-moon 5s infinite linear;
}

@keyframes rotate-earth {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes rotate-moon {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) translate(60px) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg) translate(60px) rotate(360deg);
  }
}

上述代码中，.sun、.earth和.moon表示太阳、地球和月球，它们的width、height、border-radius、background-color和position属性分别为各自的尺寸大小、颜色和相对/绝对定位等属性。为模拟太阳地球月球的运动轨迹，我们需要在地球和月球上使用动画效果：

• 地球的运动轨迹使用rotate-earth动画（注：10s为周期）。
• 月球的运动轨迹使用rotate-moon动画（注：5s为周期）。

动画使用CSS的@keyframes关键帧定义，分别模拟了地球和月球的角度变化。在这里，通过transform属性进行了旋转和平移变换。

示例二：扩展太阳系模拟动画

在示例二中，我们在示例一的基础上，进一步通过继续添加行星和卫星来扩展太阳系模拟动画。

HTML 结构

<div class="sun"></div>
<div class="earth"></div>
<div class="moon"></div>
<div class="mars"></div>
<div class="phobos"></div>
<div class="deimos"></div>

CSS 样式

.sun {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: yellow;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.earth {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-color: blue;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: rotate-earth 10s infinite linear;
}
.moon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: grey;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: rotate-moon 5s infinite linear;
}
.mars {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background-color: red;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: rotate-mars 20s infinite linear;
}
.phobos {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: pink;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: rotate-phobos 2s infinite linear;
}
.deimos {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: brown;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: rotate-deimos 10s infinite linear;
}

@keyframes rotate-earth {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes rotate-moon {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) translate(150px) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg) translate(150px) rotate(360deg);
  }
}
@keyframes rotate-mars {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) translate(400px) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg) translate(400px) rotate(360deg);
  }
}
@keyframes rotate-phobos {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) translate(200px) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg) translate(200px) rotate(360deg);
  }
}
@keyframes rotate-deimos {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) translate(250px) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg) translate(250px) rotate(360deg);
  }
}

与示例一类似，示例二也定义了太阳、地球、月球的基础样式，此处不再断续赘述。接下来，我们可以在此基础上添加其他太阳系实体：

• 火星：使用类别为.mars的标签表示。
• 火星上的卫星：使用类别为.phobos和.deimos的标签表示。

与地球、月球的实现类似，我们为火星、火星上的卫星设定了基础样式，并在之上添加了动画（rotate-mars、rotate-phobos、rotate-deimos）。

值得一提的是，在新增了过个太阳系实体后，我们在关键帧的设置中需要进行适当调整，使其旋转角度、轨迹偏离等参数能够比较逼真地描述各个实体间的相对位置关系。

在实际开发中，我们除了可以尝试模拟太阳系运动，还能更进一步尝试对地震、交通、机器人等现象的动态效果进行模拟，探索到更广领域的CSS动画应用。