📌  相关文章
📜  使用 CSS 的篝火动画效果(1)

📅  最后修改于: 2023-12-03 14:49:38.440000             🧑  作者: Mango

使用 CSS 的篝火动画效果

在网页设计中，使用动画能够增强用户体验，吸引用户注意力。CSS 是一种非常强大的设计工具，可以用它来创建简单的动画效果。本文将介绍如何使用 CSS 来创建一个篝火动画效果。

篝火动画效果示例

在开始之前，先看一下我们将要实现的篝火动画效果示例：

篝火动画效果示例

环境准备

在开始之前，我们需要一个 HTML 文件和一个 CSS 文件，然后在 HTML 文件中引用 CSS 文件。你可以使用以下代码作为 HTML 文件的模板：

<!DOCTYPE html>
<html>
<head>
  <title>篝火动画效果</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div class="campfire">
    <span class="flame"></span>
    <span class="flame"></span>
    <span class="flame"></span>
    <span class="flame"></span>
    <span class="flame"></span>
    <span class="flame"></span>
    <span class="flame"></span>
    <div class="logs">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
</body>
</html>

然后，我们需要在 CSS 文件中添加以下样式：

.campfire {
  height: 400px;
  width: 400px;
  margin: 50px auto;
  position: relative;
}

.flame {
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: rgba(255, 255, 0, 0.8);
  box-shadow: 0 0 10px rgba(255, 255, 0, 0.8),
              0 0 20px rgba(255, 255, 0, 0.8),
              0 0 30px rgba(255, 255, 0, 0.8);
  animation: flame 2s ease-in-out alternate infinite;
}

.flame:nth-child(1) {
  margin-top: -20px;
  animation-delay: 0.6s;
}

.flame:nth-child(2) {
  margin-top: -30px;
  margin-left: -10px;
  animation-delay: 0.3s;
}

.flame:nth-child(3) {
  margin-top: -35px;
  margin-left: 20px;
  animation-delay: 0.9s;
}

.flame:nth-child(4) {
  margin-top: -25px;
  margin-left: 30px;
  animation-delay: 1.2s;
}

.flame:nth-child(5) {
  margin-top: -20px;
  margin-left: -30px;
  animation-delay: 1.5s;
}

.flame:nth-child(6) {
  margin-top: -30px;
  margin-left: -20px;
  animation-delay: 1.8s;
}

.flame:nth-child(7) {
  margin-top: -35px;
  margin-left: 0;
  animation-delay: 2.1s;
}

.logs {
  position: absolute;
  top: 108px;
  left: 50%;
  height: 60px;
  width: 200px;
  margin-left: -100px;
  background-color: #6d4c41;
  border-radius: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
}

.logs span {
  display: block;
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #c15b3f;
  border-radius: 50%;
}

.logs span:nth-child(1) {
  left: 20px;
  top: 25px;
  animation: log 2s ease-in-out alternate infinite;
}

.logs span:nth-child(2) {
  left: 55px;
  top: 45px;
  animation: log 2.2s ease-in-out alternate infinite;
}

.logs span:nth-child(3) {
  left: 75px;
  top: 25px;
  animation: log 2.4s ease-in-out alternate infinite;
}

.logs span:nth-child(4) {
  left: 110px;
  top: 45px;
  animation: log 2.6s ease-in-out alternate infinite;
}

.logs span:nth-child(5) {
  left: 135px;
  top: 25px;
  animation: log 2.8s ease-in-out alternate infinite;
}

.logs span:nth-child(6) {
  left: 170px;
  top: 45px;
  animation: log 3s ease-in-out alternate infinite;
}

.logs span:nth-child(7) {
  left: 190px;
  top: 25px;
  animation: log 3.2s ease-in-out alternate infinite;
}

.logs span:nth-child(8) {
  left: 20px;
  top: 45px;
  animation: log 3.4s ease-in-out alternate infinite;
}

.logs span:nth-child(9) {
  left: 55px;
  top: 25px;
  animation: log 3.6s ease-in-out alternate infinite;
}

.logs span:nth-child(10) {
  left: 75px;
  top: 45px;
  animation: log 3.8s ease-in-out alternate infinite;
}

.logs span:nth-child(11) {
  left: 110px;
  top: 25px;
  animation: log 4s ease-in-out alternate infinite;
}

.logs span:nth-child(12) {
  left: 135px;
  top: 45px;
  animation: log 4.2s ease-in-out alternate infinite;
}

.logs span:nth-child(13) {
  left: 170px;
  top: 25px;
  animation: log 4.4s ease-in-out alternate infinite;
}

.logs span:nth-child(14) {
  left: 190px;
  top: 45px;
  animation: log 4.6s ease-in-out alternate infinite;
}

.logs span:nth-child(15) {
  left: 20px;
  top: 25px;
  animation: log 4.8s ease-in-out alternate infinite;
}

.logs span:nth-child(16) {
  left: 55px;
  top: 45px;
  animation: log 5s ease-in-out alternate infinite;
}
CSS 样式说明

接下来，我们将逐行解释代码中的每一个样式：

  1. .campfire 样式：用于设置篝火容器的高度、宽度、位置等样式。

  2. .flame 样式：用于设置篝火的火焰样式。其中 position: absolute; 表示该元素脱离文档流，bottom: 100%; 表示该元素向上定位到父元素的底部，left: 50%; 表示该元素向右定位到父元素中央，width: 60px; height: 60px; 表示该元素的宽度和高度，border-radius: 50%; 表示该元素为圆形，background-color: rgba(255, 255, 0, 0.8); 表示该元素背景色为黄色，box-shadow: 0 0 10px rgba(255, 255, 0, 0.8), 0 0 20px rgba(255, 255, 0, 0.8), 0 0 30px rgba(255, 255, 0, 0.8); 表示该元素有三层阴影效果，animation: flame 2s ease-in-out alternate infinite; 表示该元素通过动画效果 flame 在 2s 内完成，动画方式为 ease-in-out，动画交替进行，无限循环。

  3. .flame:nth-child(n) 样式：用于设置篝火的每一束火焰的位置、大小、动画延迟等样式。其中 :nth-child(n) 表示该元素为父元素的第 n 个子元素，margin 表示该元素的外边距，n 的范围从 1 到 7，分别对应着篝火的七束火焰。animation-delay 表示该元素的动画延迟，n 的范围从 0.6s 到 2.1s 不等，以产生错落有致的效果。

  4. .logs 样式：用于设置篝火的原木样式。其中 top 表示该元素向下定位到父元素的顶部，和 left 表示该元素向右定位到父元素中央，height: 60px; width: 200px; 表示该元素的宽度和高度，background-color: #6d4c41; 表示该元素背景色为棕色，border-radius: 20px; 表示该元素为圆角矩形，box-shadow: 0 0 10px rgba(0, 0, 0, 0.8); 表示该元素有一层阴影效果。

  5. .logs span 样式：用于设置篝火的每一根原木样式。其中 display: block; 表示该元素为块级元素，position: absolute; 表示该元素脱离文档流，width: 20px; height: 20px; 表示该元素的宽度和高度，background-color: #c15b3f; 表示该元素背景色为棕色，border-radius: 50%; 表示该元素为圆形。animation 表示该元素通过动画效果 log 在一定时间内完成，动画方式为 ease-in-out，动画交替进行，无限循环。n 的范围从 1 到 16，分别对应着篝火的十六根原木。

CSS 动画说明

最后，我们来看一下动画效果的实现：

@keyframes flame {
  0% {
    box-shadow: 0 0 10px rgba(255, 255, 0, 0.8),
                0 0 20px rgba(255, 255, 0, 0.8),
                0 0 30px rgba(255, 255, 0, 0.8);
    transform: scale(1);
  }
  100% {
    box-shadow: 0 0 100px rgba(255, 255, 0, 0.8),
                0 0 200px rgba(255, 255, 0, 0.8),
                0 0 300px rgba(255, 255, 0, 0.8);
    transform: scale(1.1);
  }
}

@keyframes log {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(30deg);
  }
}

其中 @keyframes flame 表示篝火火焰动画关键帧，实现了火焰阴影大小从小变大，火焰变形的效果。@keyframes log 表示篝火原木动画关键帧，实现了原木的旋转效果，加强了篝火动画效果。

总结

通过本文，我们了解了如何使用 CSS 来创建一个简单的篝火动画效果。通过使用 @keyframes，我们可以创建出更加丰富和炫酷的动画效果。希望这篇文章对你有所帮助！