CSS 的诗意化，让月亮在指尖动起来！

前端

2024-01-24 16:24:50

引言

CSS，作为网页设计语言，不仅是编写样式的工具，更是激发创造力的画笔。今天，我们将用 CSS 和 JavaScript 创造一个动态的月亮，让她在您的指尖上翩翩起舞。

描绘月亮的月相

月亮的形态随着阴晴圆缺而变化。我们可以用 CSS 的 border-radius 属性模拟不同的月相。

新月： 完全隐藏在黑暗中，border-radius: 50%。
蛾眉月： 出现一条纤细的新月，border-radius: 45%。
上弦月： 半个月亮，凸面向西，border-radius: 35%。
满月： 整个圆形，border-radius: 0。

让月亮动起来

为了让月亮动起来，我们将使用 JavaScript。我们创建一个简单的动画函数，逐渐改变月亮的 border-radius 属性，从新月过渡到满月，再回到新月。

function animateMoon() {
  const moon = document.getElementById("moon");
  let radius = 50;
  let direction = -1;

  setInterval(() => {
    radius += direction;
    if (radius <= 0 || radius >= 50) {
      direction *= -1;
    }
    moon.style.borderRadius = `${radius}%`;
  }, 50);
}

赋予月亮诗意

现在，我们的月亮有了基本的动画效果。接下来，我们用 CSS 来赋予她诗意。我们可以使用渐变色来模拟月亮的光影变化，并添加闪烁的星星作为背景。

#moon {
  width: 200px;
  height: 200px;
  background: linear-gradient(#ccc, #fff);
  border-radius: 50%;
  animation: moon-animation 10s infinite;
}

@keyframes moon-animation {
  0% {
    background: linear-gradient(#ccc, #fff);
  }
  50% {
    background: linear-gradient(#fff, #ccc);
  }
  100% {
    background: linear-gradient(#ccc, #fff);
  }
}

体验月亮的诗意之舞

现在，您的月亮已经完成了！您可以将以下代码添加到您的 HTML 中，让月亮在您的网页上翩翩起舞：

<html>
<head>
  <style>
    /* CSS 代码 */
  </style>
</head>
<body>
  <div id="moon"></div>

  <script>
    // JavaScript 代码
  </script>
</body>
</html>