金秋满月之代码实现“彩云追月”-CFANZ编程社区

在传统文化中，"彩云追月"是一种浪漫的意象，表达了月亮在云层间穿梭的美景。在网页设计中，我们可以通过 CSS 动画来还原这一动态效果，打造出月亮和云彩互动的画面。我决定使用 CSS 动画实现“彩云追月”的视觉效果。

1. 场景搭建

为了实现“彩云追月”的效果，我们需要一个背景、一个代表月亮的元素，以及几个可以移动的云彩。我们将通过 HTML 和 CSS 实现这几个元素，并使用 CSS 动画使云彩移动，月亮缓慢穿过。

<div class="sky">
  <div class="moon"></div>
  <div class="cloud cloud1"></div>
  <div class="cloud cloud2"></div>
</div>

在 HTML 中，我们创建了一个 sky 容器，里面包含了月亮和两朵云。接下来，我们通过 CSS 为这些元素添加样式。

2. 月亮和云的样式

首先，我们为背景设定一个深色的夜空，并为月亮和云朵设定形状和颜色。

.sky {
  position: relative;
  width: 100%;
  height: 100vh;
  background: linear-gradient(to bottom, #001b44, #004080);
  overflow: hidden;
}

.moon {
  position: absolute;
  top: 20%;
  left: 10%;
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, #f9d71c, #f39c12);
  border-radius: 50%;
  box-shadow: 0 0 30px rgba(255, 223, 150, 0.7);
}

.cloud {
  position: absolute;
  bottom: 30%;
  background: #ffffff;
  border-radius: 50px;
  width: 200px;
  height: 60px;
  opacity: 0.8;
}

.cloud1 {
  left: 0;
  animation: moveCloud1 12s linear infinite;
}

.cloud2 {
  left: -300px;
  animation: moveCloud2 16s linear infinite;
}

背景：通过 linear-gradient 创建了一个由深蓝到浅蓝的夜空背景。
月亮：使用了 radial-gradient 来模拟月亮的亮度变化，赋予其圆形形状和柔和的光晕。
云彩：云彩是由 div 创建的简单椭圆形，使用 border-radius 和 opacity 来模拟轻盈、半透明的效果。

3. CSS 动画

接下来，使用 CSS 动画来让云朵水平移动，从屏幕一侧漂移到另一侧，并让月亮缓缓前行，形成“彩云追月”的动态效果。

@keyframes moveCloud1 {
  0% { left: -200px; }
  100% { left: 100%; }
}

@keyframes moveCloud2 {
  0% { left: -300px; }
  100% { left: 110%; }
}

@keyframes moveMoon {
  0% { left: 10%; }
  100% { left: 90%; }
}

.moon {
  animation: moveMoon 30s linear infinite;
}

云的动画：使用 @keyframes 创建了两个不同的动画，分别控制两朵云从屏幕左侧向右漂移。每朵云的移动速度不同，营造出自然的变化感。
月亮的动画：月亮则通过一个更慢的动画从左向右移动，使其与云彩产生“追逐”的视觉效果。

4. 最终效果

通过上述代码，我们实现了一个美丽的“彩云追月”效果。月亮在夜空中缓缓移动，而云彩以不同的速度从屏幕左侧飘过，形成动态的画面。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>彩云追月</title>
  <style>
    /* 所有上述的 CSS 样式 */
  </style>
</head>
<body>
  <div class="sky">
    <div class="moon"></div>
    <div class="cloud cloud1"></div>
    <div class="cloud cloud2"></div>
  </div>
</body>
</html>