HTML制作一个太阳、地球、月球之间的绕转动画

news2025/6/25 16:56:18

大家好，今天制作一个太阳、地球、月球之间的绕转动画！

先看具体效果：
在这里插入图片描述

要制作一个太阳、地球、月球之间的绕转动画，我们需要结合HTML、CSS和JavaScript。由于CSS动画和JavaScript动画各有优缺点，这里我将给出一个使用CSS关键帧动画（@keyframes）的例子，来模拟太阳、地球和月球的绕转。

首先，我们需要在HTML中定义太阳、地球和月球的元素：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>太阳系绕转动画</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="solar-system">
  <div class="sun"></div>
  <div class="earth-orbit">
    <div class="earth">
      <div class="moon-orbit">
        <div class="moon"></div>
      </div>
    </div>
  </div>
</div>

</body>
</html>

接下来，在CSS中定义样式和动画：

body {  
  margin: 0;  
  display: flex;  
  justify-content: center;  
  align-items: center;  
  height: 100vh;  
  background: radial-gradient(circle, #fff, #000); /* 渐变背景 */  
  overflow: hidden;  
}  


/* styles.css */  
.solar-system {  
  position: relative;  
  width: 400px;  
  height: 400px;  
  margin: 0 auto;  
}  
  
.sun {  
  position: absolute;  
  width: 100px;  
  height: 100px;  
  background: yellow;  
  border-radius: 50%;  
  top: 50%;  
  left: 50%;  
  transform: translate(-50%, -50%);  
  box-shadow: 0 0 50px yellow, 0 0 100px yellow, 0 0 150px yellow; /* 增加光影效果 */  
}  
  
.earth-orbit {  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  width: 300px;  
  height: 300px;  
  border: 1px solid #ccc;  
  border-radius: 50%;  
  animation: earthOrbit 10s linear infinite;  
  transform-origin: 50% 200px; /* 这里的值取决于你的设计，这里假设太阳中心到地球轨道的距离为200px */  
  border: none; /* 去掉边框，用阴影代替 */  
  box-shadow: 0 0 50px rgba(0, 0, 255, 0.5); /* 轨道的阴影效果 */  
  animation: earthOrbit 12s cubic-bezier(0.55, 0.085, 0.68, 0.53) infinite; /* 更复杂的动画缓动函数 */
}  
  
@keyframes earthOrbit {  
  from {  
    transform: rotate(0deg) translateX(-50%) translateY(-50%);  
  }  
  to {  
    transform: rotate(360deg) translateX(-50%) translateY(-50%);  
  }  
}  
  
.earth {  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  width: 50px;  
  height: 50px;  
  background: blue;  
  border-radius: 50%;  
  transform: translate(-50%, -50%);  
  animation: earthRotation 10s linear infinite;  
  box-shadow: 0 0 10px rgba(0, 0, 255, 0.8); /* 地球的阴影效果 */
}  
  
@keyframes earthRotation {  
  from {  
    transform: translate(-50%, -50%) rotate(0deg);  
  }  
  to {  
    transform: translate(-50%, -50%) rotate(360deg);  
  }  
}  
  
.moon-orbit {  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  width: 70px; /* 根据实际情况调整月球轨道大小 */  
  height: 70px;  
  border: 1px solid #999;  
  border-radius: 50%;  
  animation: moonOrbit 5s linear infinite;  
  transform-origin: 50% 100%; /* 这里的值取决于你的设计，这里假设地球中心到月球轨道的距离为月球轨道半径 */  
  box-shadow: 0 0 20px rgba(128, 128, 128, 0.5); /* 月球轨道的阴影效果 */  
  animation: moonOrbit 7s linear infinite; /* 月球轨道的动画时间可以不同于地球 */ 
}  
  
@keyframes moonOrbit {  
  from {  
    transform: rotate(0deg) translateX(-50%) translateY(-50%);  
  }  
  to {  
    transform: rotate(360deg) translateX(-50%) translateY(-50%);  
  }  
}  
  
.moon {  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  width: 20px;  
  height: 20px;  
  background: gray;  
  border-radius: 50%;  
  transform: translate(-50%, -50%);  
   box-shadow: 0 0 5px rgba(128, 128, 128, 0.8); /* 月球的阴影效果 */  
}