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

本文主要是介绍HTML制作一个太阳、地球、月球之间的绕转动画，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

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

要制作一个太阳、地球、月球之间的绕转动画，我们需要结合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); /* 月球的阴影效果 */  
}