如何用CSS实现地球和月亮的公转

发布时间：2021-09-17 10:06:12 作者：柒染
来源：亿速云阅读：261

# 如何用CSS实现地球和月亮的公转

## 引言

在网页设计中，CSS不仅可以用于布局和样式美化，还能通过动画和变换实现令人惊叹的动态效果。本文将详细介绍如何仅用HTML和CSS创建一个地球绕太阳公转、月亮绕地球公转的完整天文模型。我们将从基础概念讲起，逐步实现轨道运动、自转效果和光照阴影，最终形成一个完整的太阳系微缩模型。

## 一、基础HTML结构

首先建立基础的HTML框架，创建三个`<div>`元素分别代表太阳、地球和月亮：

```html
<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>

二、CSS基础样式设置

为天体设置基本样式和初始位置：

.solar-system {
  position: relative;
  width: 600px;
  height: 600px;
  margin: 50px auto;
  background: #000;
  border-radius: 50%;
}

.sun {
  position: absolute;
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, #fdb813, #f88b06);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 50px #f5b342;
}

.earth-orbit {
  position: absolute;
  width: 400px;
  height: 400px;
  border: 1px dashed rgba(255,255,255,0.2);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.earth {
  width: 30px;
  height: 30px;
  background: radial-gradient(circle, #1fa3ff, #003366);
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.moon-orbit {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.moon {
  width: 10px;
  height: 10px;
  background: #ddd;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

三、实现地球公转动画

使用CSS @keyframes 创建地球绕太阳的公转效果：

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

.earth-orbit {
  animation: earth-orbit 36.5s linear infinite;
}

这里设置36.5秒完成一圈公转（象征365天），使用linear保持匀速运动。

四、添加地球自转效果

为地球添加绕自身轴旋转的动画：

@keyframes earth-rotation {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -60px 0;
  }
}

.earth {
  background-image: url('earth-texture.jpg');
  background-size: 60px 30px;
  animation: earth-rotation 3s linear infinite;
}

五、实现月球公转动画

创建月球绕地球旋转的动画：

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

.moon-orbit {
  animation: moon-orbit 2.7s linear infinite;
}

设置2.7秒完成一圈公转（象征27天月球公转周期）。

六、添加光照和阴影效果

使用box-shadow和filter属性模拟光照效果：

.sun {
  filter: drop-shadow(0 0 20px #f5b342);
}

.earth::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: inset -5px 0 10px rgba(0,0,0,0.7);
}

.moon::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: inset -2px 0 5px rgba(0,0,0,0.7);
}

七、响应式设计优化

添加媒体查询使模型适应不同屏幕：

@media (max-width: 768px) {
  .solar-system {
    width: 300px;
    height: 300px;
  }
  .earth-orbit {
    width: 200px;
    height: 200px;
  }
  .moon-orbit {
    width: 40px;
    height: 40px;
  }
}

八、性能优化技巧

使用will-change属性预通知浏览器元素将变化：

.earth-orbit, .moon-orbit {
  will-change: transform;
}

启用硬件加速：

.earth, .moon {
  transform: translateZ(0);
}

九、完整代码示例

<!DOCTYPE html>
<html>
<head>
<style>
  /* 此处插入上述所有CSS代码 */
</style>
</head>
<body>
  <!-- 插入HTML结构 -->
</body>
</html>

十、进阶改进建议

添加轨道倾角：通过调整rotateX()实现黄道面倾斜

.earth-orbit {
  transform: translate(-50%, -50%) rotateX(60deg);
}

实现月相变化：使用clip-path动态裁剪月球可见部分

@keyframes moon-phase {
  0% { clip-path: circle(50% at 100% 50%); }
  50% { clip-path: circle(50% at 0% 50%); }
  100% { clip-path: circle(50% at 100% 50%); }
}

添加星空背景：

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(1px 1px at 50px 100px, white, rgba(0,0,0,0)),
    radial-gradient(1px 1px at 150px 250px, white, rgba(0,0,0,0));
  background-size: 200px 200px;
}

结语

通过本文的步骤，我们仅用CSS就实现了一个完整的地月公转系统。这种技术可以应用于： - 教育类网站的天文演示 - 科幻主题网站的装饰元素 - 加载动画等交互场景

关键点在于： 1. 合理使用嵌套的transform属性 2. 精确控制动画时间和运动曲线 3. 层级结构的巧妙设计

尝试调整参数（如轨道半径、运动周期等）可以创建出不同的天文现象模拟效果。CSS动画的可能性只受限于我们的想象力！

作者提示：本文代码在Chrome、Firefox等现代浏览器中效果最佳，如需兼容旧版浏览器，可能需要添加-webkit前缀。 “`