中秋共赏，用CSS画个月亮放孔明灯

2023-11-02 16:29:30

中秋佳节将至，皓月当空，银辉遍地。对于恋人们来说，在这个团圆的日子里，与心爱之人共赏明月，别有一番风情。

然而，今年的中秋节，你打算如何度过呢？与其仅仅是赏月，不如发挥你的想象力，用CSS画个月亮，放孔明灯，营造出浪漫温馨的节日气氛。

CSS画月亮

要使用CSS画个月亮，需要用到CSS的渐变和圆角属性。

.moon {
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, #e6e6e6, #d6d6d6, #b8b8b8, #a0a0a0, #888888);
  border-radius: 50%;
}

这段代码创建了一个圆形的月亮，从浅灰色渐变到深灰色。

CSS放孔明灯

要使用CSS放孔明灯，需要用到CSS的动画和三角形属性。

.sky-lantern {
  width: 0;
  height: 0;
  border-top: 100px solid transparent;
  border-left: 50px solid #ff6600;
  border-right: 50px solid #ff6600;
  animation: rise 2s infinite linear;
}

@keyframes rise {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100px);
  }
}

这段代码创建了一个三角形的孔明灯，它会不断向上飘动。

效果预览

将以上代码放入一个HTML文件中，就可以看到效果了：

<!DOCTYPE html>
<html>
<head>
  <style>
    .moon {
      width: 100px;
      height: 100px;
      background: radial-gradient(circle, #e6e6e6, #d6d6d6, #b8b8b8, #a0a0a0, #888888);
      border-radius: 50%;
    }
    
    .sky-lantern {
      width: 0;
      height: 0;
      border-top: 100px solid transparent;
      border-left: 50px solid #ff6600;
      border-right: 50px solid #ff6600;
      animation: rise 2s infinite linear;
    }
    
    @keyframes rise {
      0% {
        transform: translateY(0);
      }
      100% {
        transform: translateY(-100px);
      }
    }
  </style>
</head>
<body>
  <div class="moon"></div>
  <div class="sky-lantern"></div>
</body>
</html>