中秋月圆，CSS诗意的后羿奔月

在月圆之夜，中国传统节日中秋节，我们将一起用CSS代码，构建一个诗意的后羿奔月动画场景。

后羿的旅程：

/* 后羿：一个勇敢的弓箭手 */
.houyi {
  position: absolute;
  left: 50%;
  bottom: 100px;
  transform: translate(-50%, -50%);
  animation: houyi-run 2s infinite;
}

/* 后羿奔跑动画 */
@keyframes houyi-run {
  0% {
    left: 0;
  }
  100% {
    left: 100%;
  }
}

/* 后羿的弓箭 */
.arrow {
  position: absolute;
  left: 50%;
  bottom: 100px;
  transform: translate(-50%, -50%) rotate(45deg);
  animation: arrow-shoot 1s infinite;
}

/* 后羿射箭动画 */
@keyframes arrow-shoot {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

月亮的升起：

/* 月亮：一个神秘的星球 */
.moon {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #ffc0cb;
  animation: moon-rise 2s infinite;
}

/* 月亮升起动画 */
@keyframes moon-rise {
  0% {
    bottom: -200px;
  }
  100% {
    bottom: 0;
  }
}

嫦娥的舞蹈：

/* 嫦娥：一个美丽的仙女 */
.chang'e {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  animation: chang'e-dance 2s infinite;
}

/* 嫦娥舞蹈动画 */
@keyframes chang'e-dance {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  50% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
}

背景：

/* 背景：一个宁静的夜晚 */
body {
  background-color: #000;
}

/* 星星：点缀夜空的精灵 */
.star {
  position: absolute;
  left: random(0, 100%);
  top: random(0, 100%);
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background-color: #fff;
  animation: star-twinkle 2s infinite;
}

/* 星星闪烁动画 */
@keyframes star-twinkle {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

用CSS代码构建的后羿奔月场景，让我们感受到中秋节的诗意与浪漫。后羿的奔跑、箭矢的射出、嫦娥的舞蹈、月亮的升起，都如此生动。背景中闪烁的星星，更增添了几分神秘感。