返回

用CSS绘制嫦娥奔月3D动画，体验中秋佳节的别样魅力

前端

在中秋佳节之际，我们不禁为我国航天事业取得的伟大成就而感到自豪。而在这个充满诗情画意的节日里，用CSS绘制一个别出心裁的嫦娥奔月3D动画，无疑是一件妙不可言的事情。

嫦娥奔月的神话自古流传，寄托了人们对美好生活的向往。而如今，我们的嫦娥卫星已经成功环月飞行，取得了举世瞩目的成就。结合传统文化与现代科技，让我们用CSS来呈现一场别具一格的视觉盛宴。

在代码的海洋中，我们先搭建好舞台：

/* 舞台背景 */
#stage {
  width: 800px;
  height: 600px;
  background: #000;
}

/* 嫦娥 */
#chang-e {
  width: 100px;
  height: 100px;
  background: #f00;
  border-radius: 50%;
  animation: chang-e-fly 2s linear infinite;
}

/* 动画效果 */
@keyframes chang-e-fly {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(400px, -200px);
  }
  100% {
    transform: translate(800px, 0);
  }
}

/* 卫星 */
#satellite {
  width: 50px;
  height: 50px;
  background: #0ff;
  border-radius: 50%;
  animation: satellite-fly 2s linear infinite;
}

/* 动画效果 */
@keyframes satellite-fly {
  0% {
    transform: translate(800px, 0);
  }
  50% {
    transform: translate(400px, 200px);
  }
  100% {
    transform: translate(0, 0);
  }
}

然后，我们让嫦娥翩翩起舞：

/* 舞台背景 */
#stage {
  ...
}

/* 嫦娥 */
#chang-e {
  ...
  animation-delay: -1s;
}

最后，我们点亮卫星，让它环绕嫦娥飞翔：

/* 舞台背景 */
#stage {
  ...
}

/* 嫦娥 */
#chang-e {
  ...
}

/* 卫星 */
#satellite {
  ...
  animation-delay: -0.5s;
}

现在，让我们欣赏这幅动态的画面：嫦娥轻盈地飞向月宫，卫星忠诚地环绕着她，共同谱写着中秋节的别样美丽。

在HTML中，我们只需要添加舞台：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="stage"></div>
</body>
</html>

通过CSS和HTML的巧妙结合，我们创造了一个充满诗意的中秋节动画。嫦娥奔月的神话，在现代科技的映衬下，焕发出新的活力。让我们在这个团圆的时刻，一同领略这别样的中秋风情。