迎接新年喜气洋洋：HTML+CSS打造两个摆动的大灯笼

2024-01-12 12:20:48

为新年增添喜庆：用 HTML 和 CSS 制作摇曳的大灯笼

春节的喜庆氛围怎能少得了大红灯笼呢？今天，让我们发挥创造力，用 HTML 和 CSS 轻松制作两个摇曳的大灯笼，为新年增添一抹喜气洋洋的色彩。

HTML 代码：构建灯笼框架

首先，创建一个 HTML 文件，并输入以下代码：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <div class="lantern-container">
    <div class="lantern">
      <div class="lantern-top"></div>
      <div class="lantern-body"></div>
      <div class="lantern-bottom"></div>
    </div>
    <div class="lantern">
      <div class="lantern-top"></div>
      <div class="lantern-body"></div>
      <div class="lantern-bottom"></div>
    </div>
  </div>
</body>
</html>

CSS 代码：点亮灯笼

接下来，在 CSS 文件中添加样式，让灯笼栩栩如生：

.lantern-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.lantern {
  width: 200px;
  height: 300px;
  background-color: #ff0000;
  border-radius: 100px;
  margin: 0 20px;
  animation: swing 3s infinite alternate;
}

.lantern-top {
  width: 100px;
  height: 50px;
  background-color: #ffffff;
  border-radius: 50px;
  margin: 0 auto;
}

.lantern-body {
  width: 150px;
  height: 200px;
  background-color: #ff0000;
  border-radius: 100px;
  margin: 0 auto;
}

.lantern-bottom {
  width: 100px;
  height: 50px;
  background-color: #ffffff;
  border-radius: 50px;
  margin: 0 auto;
}

@keyframes swing {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(10deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

运行 HTML 和 CSS

保存 HTML 文件为 "lantern.html"，CSS 文件为 "lantern.css"。然后在浏览器中打开 "lantern.html" 文件，两个摇曳的大红灯笼就映入眼帘了！

常见问题解答

我可以改变灯笼的颜色吗？
- 当然可以！只需在 ".lantern" 类的 "background-color" 属性中更改颜色值即可。
如何让灯笼摆动的幅度更大？
- 在 @keyframes "swing" 中，调整 "transform: rotate(10deg);" 中的 "10deg" 值。
我能让灯笼无限摆动吗？
- 在 "animation" 属性中添加 "infinite" 值即可：animation: swing 3s infinite alternate;
如何添加其他装饰到灯笼上？
- 在 ".lantern" 类中添加 "::after" 或 "::before" 伪元素，并设置适当的样式。
我能用 CSS 让灯笼发光吗？
- 可以使用 "box-shadow" 属性添加发光效果，但需要小心调整，以免让灯笼显得过于卡通。