用 CSS 创造一轮明月，它怀抱着可爱的玉兔！

2023-10-21 23:05:21

在中秋佳节来临之际，让我们用 CSS 创造一轮明月，它怀抱着可爱的玉兔，带来节日的气息和祝福。

CSS 中的明月与玉兔

中秋节，又称团圆节，是一个重要的传统节日。月亮和玉兔是这个节日中不可或缺的元素，象征着团圆和吉祥。通过 CSS 的神奇，我们可以创造一个属于自己的数字明月和玉兔，让节日氛围更加浓厚。

步骤 1：创建画布

首先，我们需要创建一个画布，作为明月和玉兔的家。使用 HTML 和 CSS 创建一个带有白色背景的 div 容器：

<div id="canvas"></div>

#canvas {
  width: 600px;
  height: 600px;
  background-color: white;
}

步骤 2：绘制明月

明月是这幅画作的中心，我们将使用 CSS 的 radial-gradient() 函数来创建它。该函数允许我们创建一个以特定点为中心的径向渐变，从而模拟月光的柔和光晕：

#moon {
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffff00 0%, #ffffff 100%);
}

步骤 3：定位明月

现在，我们需要将明月放在画布的中心。使用 CSS 的 position 和 left、top 属性：

#moon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

步骤 4：创建玉兔

玉兔是月明的陪伴，它可爱的身影为画面增添了生机。我们将使用 CSS 的 div 和 border-radius 属性来创建玉兔的身体和耳朵：

#rabbit {
  width: 200px;
  height: 150px;
  background-color: #ffffff;
  border-radius: 50% 50% 0 0;
  position: absolute;
  left: 200px;
  top: 250px;
}

#rabbit-ear-left {
  width: 50px;
  height: 100px;
  background-color: #ffffff;
  border-radius: 50% 0 0 50%;
  position: absolute;
  left: 50px;
  top: -20px;
  transform: rotate(-30deg);
}

#rabbit-ear-right {
  width: 50px;
  height: 100px;
  background-color: #ffffff;
  border-radius: 0 50% 50% 0;
  position: absolute;
  left: 150px;
  top: -20px;
  transform: rotate(30deg);
}

步骤 5：添加玉兔细节

为了让玉兔更加生动，我们需要添加一些细节，例如眼睛、鼻子和嘴巴。使用 CSS 的 div 和 border-radius 属性：

#rabbit-eye-left {
  width: 10px;
  height: 10px;
  background-color: black;
  border-radius: 50%;
  position: absolute;
  left: 80px;
  top: 50px;
}

#rabbit-eye-right {
  width: 10px;
  height: 10px;
  background-color: black;
  border-radius: 50%;
  position: absolute;
  left: 120px;
  top: 50px;
}

#rabbit-nose {
  width: 10px;
  height: 10px;
  background-color: pink;
  border-radius: 50%;
  position: absolute;
  left: 100px;
  top: 70px;
}

#rabbit-mouth {
  width: 50px;
  height: 10px;
  background-color: black;
  border-radius: 50%;
  position: absolute;
  left: 90px;
  top: 90px;
}

步骤 6：优化细节

为了进一步优化玉兔的细节，我们可以使用 CSS 的 box-shadow 属性添加阴影和深度：

#rabbit {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

#rabbit-ear-left, #rabbit-ear-right {
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
}

#rabbit-eye-left, #rabbit-eye-right {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
}

#rabbit-nose {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
}

#rabbit-mouth {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
}

步骤 7：添加节日气息

为了让画面更具节日气氛，我们可以添加一些装饰元素，例如星星和彩带。使用 CSS 的 div 和 border-radius 属性：

#star {
  width: 10px;
  height: 10px;
  background-color: gold;
  border-radius: 50%;
  position: absolute;
  left: 300px;
  top: 100px;
  animation: twinkle 1s infinite alternate;
}

#streamer {
  width: 200px;
  height: 10px;
  background-color: red;
  position: absolute;
  left: 250px;
  top: 400px;
  transform: rotate(45deg);
}

@keyframes twinkle {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}