用CSS画个灯笼，过春节！

2023-12-20 19:35:19

用 CSS 绘制喜庆的节日灯笼，点亮你的春节气氛

导语

春节来临之际，大街小巷张灯结彩，到处洋溢着喜气洋洋的节日气氛。灯笼作为一种传统中国装饰品，不仅象征着好运和吉祥，也代表着人们对新年的美好祝愿。如果你也想在春节期间为你的家居增添一抹节日风情，何不亲手用 CSS 画一个灯笼呢？

准备就绪

要开始绘制 CSS 灯笼，你首先需要创建一个新的 CSS 文件并将其命名为 "lantern.css"。在文件中输入以下代码：

body {
  background-color: #ff0000;
}

.lantern {
  width: 200px;
  height: 300px;
  background-color: #ffffff;
  border-radius: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.lantern-top {
  width: 100px;
  height: 100px;
  background-color: #ff0000;
  border-radius: 50%;
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translate(-50%, -50%);
}

.lantern-bottom {
  width: 100px;
  height: 100px;
  background-color: #ff0000;
  border-radius: 50%;
  position: absolute;
  bottom: -50px;
  left: 50%;
  transform: translate(-50%, -50%);
}

.lantern-tassel {
  width: 20px;
  height: 50px;
  background-color: #ff0000;
  position: absolute;
  bottom: -25px;
  left: 50%;
  transform: translate(-50%, -50%);
}

点亮灯笼

接下来，我们需要将 "lantern.css" 文件链接到我们的 HTML 文件。在 <head> 标签中，添加以下代码：

<link rel="stylesheet" href="lantern.css">

最后，创建一个 HTML 文件并将其命名为 "lantern.html"。在文件中输入以下代码：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="lantern.css">
</head>
<body>
  <div class="lantern">
    <div class="lantern-top"></div>
    <div class="lantern-bottom"></div>
    <div class="lantern-tassel"></div>
  </div>
</body>
</html>