所有分类
  • 所有分类
  • 后端开发
当前位置： 正文
CSS3酷炫动画：手把手教您使用纯CSS制作蜡烛动画

CSS3酷炫动画：手把手教您使用纯CSS制作蜡烛动画

2023-05-26 技术资讯 推广
通过此动画，我们将使用一些基本的CSS绘图。然后，我们将使用CSS创建触发事件。最后，我们将模拟火焰（尽我们所能！）。 注意：您将在下面看到我使用绝对定位和变换来定位HTML元素，这是使用CSS绘制时的好技巧。 下面是我们要使用CSS绘制的内容： 如果愿意，您可以...

通过此动画，我们将使用一些基本的CSS绘图。然后，我们将使用CSS创建触发事件。最后，我们将模拟火焰（尽我们所能！）。

注意：您将在下面看到我使用绝对定位和变换来定位HTML元素，这是使用CSS绘制时的好技巧。

下面是我们要使用CSS绘制的内容：

12.jpg

如果愿意，您可以跟着我。我已经建立了一个基础笔，它建立了一切的基础。

因此，我们首先绘制蜡烛的底座（桌子表面）。

我们将为表的颜色和宽度使用一些SCSS变量：

// table dimensions
$tableWidth: 280px;
$tableHeight: 10px;
$tableBackground: #8b4513;

该表基本上是div具有某些尺寸的。

我们可以将HTML更新为如下所示：

<div class="wrapper">
  <div class="table"></div>
</div>

现在，我们添加一些基本的SCSS（用于transform将表格居中）：

.table {
  position: absolute;
  left: 50%;
  top: 50%;
  width: $tableWidth;
  height: $tableHeight;
  background: $tableBackground;
  transform: translate(-50%, -50%);
  z-index: 2;
}

这看起来有些毫无生气。CSS绘图的技巧是使用box-shadow，因此我们将其添加到：

.table {
  ....
  box-shadow: 0px 2px 5px #111;
}

现在，您应该具有：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS蜡烛动画 - Web前端之家https://www.jiangweishan.com</title>
    <style>
     body {
  margin: 0;
}

.wrapper {
  background-color: #2a2a35;
  height: 100vh;
  width: 100vw;
}

.table {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 280px;
  height: 10px;
  background: #8b4513;
  transform: translate(-50%, -50%);
  z-index: 2;
  box-shadow: 0px 2px 5px #111;
}



    </style>
</head>
<body>
    

    

  <div class="wrapper">
    <div class="table"></div>
  </div>

    <script>
        
</script>
</body>
</html>

太棒了！

现在让我们在那张桌子上放一支蜡烛。我们将为我们的蜡烛尺寸和颜色设置一些SCSS变量（随意使用您想要的任何尺寸）：

// candle
$candleWidth: 35px;
$candleHeight: 130px;
$candleBorderColor: #673c63;
$stickWidth: 3px;
$stickHeight: 15px;

如果检查一下我之前显示的蜡烛的图像，您会发现它本质上是div一个border上面有一根大棒的蜡烛。首先让我们自己绘制蜡烛。

我们首先更新HTML：

<div class="wrapper">
  <div class="candle">
  </div>
  <div class="table"></div>
</div>

现在，我们添加我们的CSS（同样，box-shadow这里是技巧）：

.candle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: $candleWidth;
  height: $candleHeight;
  background: #fff;
  transform-origin: center right;
  transform: translate(-50%, -100%);
  box-shadow: -2px 0px 0px #95c6f2 inset;
  border: 3px solid $candleBorderColor;
}

我们有蜡烛！

现在，我们在上面添加棍子（我们已经在上面包括了尺寸）。

我们首先需要将其添加到我们的HTML中：

<div class="wrapper">
  <div class="candle">
    <div class="candle-stick"></div>
  </div>
  <div class="table"></div>
</div>

CSS（这里没什么花哨的）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS蜡烛动画 - Web前端之家https://www.jiangweishan.com</title>
    <style>
     body {
  margin: 0;
}

.wrapper {
  background-color: #2a2a35;
  height: 100vh;
  width: 100vw;
}

.table {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 280px;
  height: 10px;
  background: #8b4513;
  transform: translate(-50%, -50%);
  z-index: 2;
  box-shadow: 0px 2px 5px #111;
}

.candle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 35px;
  height: 130px;
  background: #fff;
  transform-origin: center right;
  transform: translate(-50%, -100%);
  box-shadow: -2px 0px 0px #95c6f2 inset;
  border: 3px solid #673c63;
}

.candle-stick {
  width: 3px;
  height: 15px;
  background: #673c63;
  position: absolute;
  left: 50%;
  top: 0%;
  background: #673c63;
  border-radius: 8px;
  transform: translate(-50%, -100%);
}



    </style>
</head>
<body>
    

    

  <div class="wrapper">
    <div class="candle">
      <div class="candle-stick"></div>
    </div>
    <div class="table"></div>
  </div>

    <script>
        
</script>
</body>
</html>

如您所见，这里没有动画，因此让我们开始制作动画。

我们将首先添加一个按钮，该按钮会将背景颜色从浅色更改为深色（我们已经设置了这些SCSS变量—$lightBackground和$darkBackground）。将此添加到HTML的最顶部：

<input id="toggle" type="checkbox">
<label for="toggle">Trigger Candle</label>

这会给我们一个不太吸引人的复选框和标签。因此，让我们对其进行样式设置，使其看起来更好一些：

label {
  background: #a5d6a7;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  position: absolute;
  font: 900 24px/1.4 -system-ui, sans-serif;
  transform: translate(50%, 50%);
  cursor: pointer;
}

这为标签提供了一些样式，但是我们也想从视图中隐藏复选框。现在，我们可以通过将hidden属性添加到复选框HTML来做到这一点。但是，这会使键盘导航器无法访问该复选框，因此更好的选择是将其移出视线。首先，让我们.visually-hidden为复选框HTML添加一个类：

<input id="toggle" type="checkbox" class="visually-hidden">

然后，使用此CSS将复选框移到左侧：

.visually-hidden {
  position: absolute;
  left: -100vw;
}

当复选框具有焦点时，我们还提供视觉提示：

input:checked + label {
  outline: 1px dotted red;
}

（如果您想知道为什么在HTML中将放置在input之前label，现在您知道为什么了。这样我们就可以使用同级选择器（+）。稍后再使用。）

现在，您可能不喜欢按钮周围的红色虚线轮廓，但我将留给您提出更好的建议。（例如，您可以改为更改标签的背景色。）

这是我们现在拥有的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS蜡烛动画 - Web前端之家https://www.jiangweishan.com</title>
    <style>
     body {
  margin: 0;
}

.wrapper {
  background-color: #2a2a35;
  height: 100vh;
  width: 100vw;
}

.table {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 280px;
  height: 10px;
  background: #8b4513;
  transform: translate(-50%, -50%);
  z-index: 2;
  box-shadow: 0px 2px 5px #111;
}

.candle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 35px;
  height: 130px;
  background: #fff;
  transform-origin: center right;
  transform: translate(-50%, -100%);
  box-shadow: -2px 0px 0px #95c6f2 inset;
  border: 3px solid #673c63;
}

.candle-stick {
  width: 3px;
  height: 15px;
  background: #673c63;
  position: absolute;
  left: 50%;
  top: 0%;
  background: #673c63;
  border-radius: 8px;
  transform: translate(-50%, -100%);
}

label {
  background: #a5d6a7;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  position: absolute;
  font: 900 24px/1.4 -system-ui, sans-serif;
  transform: translate(50%, 50%);
  cursor: pointer;
}

.visually-hidden {
  position: absolute;
  left: -100vw;
}

input:checked + label {
  outline: 1px dotted red;
}



    </style>
</head>
<body>
  <input id="toggle" type="checkbox"  class="visually-hidden">
  <label for="toggle">Trigger Candle</label>
  <div class="wrapper">
    <div class="candle">
      <div class="candle-stick"></div>
    </div>
    <div class="table"></div>
  </div>

<script>
        
</script>
</body>
</html>

让我们根据是否选中复选框来更改页面背景。我们可以通过使用常规的同级选择器来执行此操作而无需使用JavaScript ~：

#toggle:checked ~ .wrapper {
  background: $lightBackground;}

现在我们还可以添加一个过渡，使过渡更加平滑：

.wrapper {
  background-color: $darkBackground;
  height: 100vh;
  width: 100vw;
  transition: background-color 0.6s ease;}

我们现在有这个：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS蜡烛动画 - Web前端之家https://www.jiangweishan.com</title>
    <style>
     body {
  margin: 0;
}

.wrapper {
  background-color: #2a2a35;
  height: 100vh;
  width: 100vw;
  transition: background-color 0.6s ease;
}

.table {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 280px;
  height: 10px;
  background: #8b4513;
  transform: translate(-50%, -50%);
  z-index: 2;
  box-shadow: 0px 2px 5px #111;
}

.candle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 35px;
  height: 130px;
  background: #fff;
  transform-origin: center right;
  transform: translate(-50%, -100%);
  box-shadow: -2px 0px 0px #95c6f2 inset;
  border: 3px solid #673c63;
}

.candle-stick {
  width: 3px;
  height: 15px;
  background: #673c63;
  position: absolute;
  left: 50%;
  top: 0%;
  background: #673c63;
  border-radius: 8px;
  transform: translate(-50%, -100%);
}

label {
  background: #a5d6a7;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  position: absolute;
  font: 900 24px/1.4 -system-ui, sans-serif;
  transform: translate(50%, 50%);
  cursor: pointer;
}

.visually-hidden {
  position: absolute;
  left: -100vw;
}

input:checked + label {
  outline: 1px dotted red;
}

#toggle:checked ~ .wrapper {
  background: #ffffe0;
}



    </style>
</head>
<body>
  <input id="toggle" type="checkbox"  class="visually-hidden">
  <label for="toggle">Trigger Candle</label>
  <div class="wrapper">
    <div class="candle">
      <div class="candle-stick"></div>
    </div>
    <div class="table"></div>
  </div>

<script>
        
</script>
</body>
</html>

我们要做的另一件事是在背景明亮时添加火焰。

和以前一样，我们设置SCSS变量：

// flame
$flameHeight: 20px;
$flameWidth: 16px;
$flameColor1: #e25822;
$flameColor2: #e2b822;

让我们还更新HTML以使其包含火焰：

<label for="toggle">Trigger Candle</label>
<input id="toggle" type="checkbox" hidden>
<div class="wrapper">
  <div class="candle">
    <div class="candle-stick"></div>
     <div class="flame"></div>
  </div>
  <div class="table"></div>
</div>

我们的火焰底数需要使用border-radius八个值。在绘制复杂形状时，Fancy Border Radius Generator网站非常适合border-radius为您生成。

所以这是我们的CSS（border-radius是关键部分）：

.flame {
  width: $flameWidth;
  height: $flameHeight;
  background: #673c63;
  position: absolute;
  left: 50%;
  top: 0%;
  background: $flameColor1;
  transform: translate(-50%, -170%);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

现在，我们可以添加一些动画，使其像真实的火焰一样闪烁。我们将在两种颜色（$flameColor1和$flameColor2）之间更改火焰，并且还将在左右两侧稍微改变位置。首先，这是关键帧代码：

@keyframes fire-flicker {
  from {
    background: $flameColor1;
    left: 47%;
  }

  to {
    background: $flameColor2;
    left: 53%;
  }
}

然后，我们需要将此动画添加到flame类中：

animation: fire-flicker 0.2s infinite linear;

现在，我们的火焰将闪烁：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS蜡烛动画 - Web前端之家https://www.jiangweishan.com</title>
    <style>
     body {
  margin: 0;
}

.wrapper {
  background-color: #2a2a35;
  height: 100vh;
  width: 100vw;
  transition: background-color 0.6s ease;
}

.table {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 280px;
  height: 10px;
  background: #8b4513;
  transform: translate(-50%, -50%);
  z-index: 2;
  box-shadow: 0px 2px 5px #111;
}

.candle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 35px;
  height: 130px;
  background: #fff;
  transform-origin: center right;
  transform: translate(-50%, -100%);
  box-shadow: -2px 0px 0px #95c6f2 inset;
  border: 3px solid #673c63;
}

.candle-stick {
  width: 3px;
  height: 15px;
  background: #673c63;
  position: absolute;
  left: 50%;
  top: 0%;
  background: #673c63;
  border-radius: 8px;
  transform: translate(-50%, -100%);
}

label {
  background: #a5d6a7;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  position: absolute;
  font: 900 24px/1.4 -system-ui, sans-serif;
  transform: translate(50%, 50%);
  cursor: pointer;
}

.visually-hidden {
  position: absolute;
  left: -100vw;
}

input:checked + label {
  outline: 1px dotted red;
}

#toggle:checked ~ .wrapper {
  background: #ffffe0;
}

.flame {
  width: 16px;
  height: 20px;
  background: #673c63;
  position: absolute;
  left: 50%;
  top: 0%;
  background: #e25822;
  transform: translate(-50%, -170%);
  border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
  animation: fire-flicker 0.2s infinite linear;
}

@keyframes fire-flicker {
  from {
    background: #e25822;
    left: 47%;
  }
  to {
    background: #e2b822;
    left: 53%;
  }
}



    </style>
</head>
<body>
  <input id="toggle" type="checkbox"  class="visually-hidden">
  <label for="toggle">Trigger Candle</label>
  <div class="wrapper">
    <div class="candle">
      <div class="candle-stick"></div>
      <div class="flame"></div>
    </div>
    <div class="table"></div>
  </div>

<script>
        
</script>
</body>
</html>

随时尝试改善它，因为它可能会更好！

好吧，让我们做进一步的调整。当背景较暗时，我们将关闭火焰。

我们将使用它opacity来实现这一目标。在flame课程上，添加不透明度。我们还将向其添加一个过渡，使其与匹配background：

.flame {
    ...
    opacity: 0;
    transition: opacity 0.6s ease;
  }

然后，我们可以使用SCSS的功能以及checked状态的一些嵌套：

#toggle:checked ~ .wrapper {
    background: $lightBackground;
    .flame {
      opacity: 1;
    }
  }

现在，火焰仅在明亮的背景下显示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS蜡烛动画 - Web前端之家https://www.jiangweishan.com</title>
    <style>
     body {
  margin: 0;
}

.wrapper {
  background-color: #2a2a35;
  height: 100vh;
  width: 100vw;
  transition: background-color 0.6s ease;
}

.table {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 280px;
  height: 10px;
  background: #8b4513;
  transform: translate(-50%, -50%);
  z-index: 2;
  box-shadow: 0px 2px 5px #111;
}

.candle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 35px;
  height: 130px;
  background: #fff;
  transform-origin: center right;
  transform: translate(-50%, -100%);
  box-shadow: -2px 0px 0px #95c6f2 inset;
  border: 3px solid #673c63;
}

.candle-stick {
  width: 3px;
  height: 15px;
  background: #673c63;
  position: absolute;
  left: 50%;
  top: 0%;
  background: #673c63;
  border-radius: 8px;
  transform: translate(-50%, -100%);
}

label {
  background: #a5d6a7;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  position: absolute;
  font: 900 24px/1.4 -system-ui, sans-serif;
  transform: translate(50%, 50%);
  cursor: pointer;
}

.visually-hidden {
  position: absolute;
  left: -100vw;
}

input:checked + label {
  outline: 1px dotted red;
}

#toggle:checked ~ .wrapper {
  background: #ffffe0;
}
#toggle:checked ~ .wrapper .flame {
  opacity: 1;
}

.flame {
  width: 16px;
  height: 20px;
  background: #673c63;
  position: absolute;
  left: 50%;
  top: 0%;
  background: #e25822;
  transform: translate(-50%, -170%);
  border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
  animation: fire-flicker 0.2s infinite linear;
  opacity: 0;
  transition: opacity 0.6s ease;
}

@keyframes fire-flicker {
  from {
    background: #e25822;
    left: 47%;
  }
  to {
    background: #e2b822;
    left: 53%;
  }
}



    </style>
</head>
<body>
  <input id="toggle" type="checkbox"  class="visually-hidden">
<label for="toggle">Trigger Candle</label>
<div class="wrapper">
  <div class="candle">
    <div class="candle-stick"></div>
    <div class="flame"></div>
  </div>
  <div class="table"></div>
</div>

<script>
        
</script>
</body>
</html>

最后，标签的“触发蜡烛”文本有点平淡。我们可以做很多事情！因此，让我们改进标签，使文本在“ Lumos”和“ Nox”之间切换–当然是受哈利·波特的启发！

首先，我们可以将标签更改为不包含文本（我们将content在其中添加文本）：

<label for="toggle"></label>

现在，我们将添加一些CSS来切换文本：

label::after {
  content: "Lumos";
}

#toggle:checked ~ label::after {
  content: "Nox";
}

为了阻止标签跳动，让我们添加以下样式：

label {
    ...
    min-width: 100px;
    text-align: center;
}

我们终于得到它了。我们的蜡烛动画完成了-几乎没有JavaScript！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS蜡烛动画 - Web前端之家https://www.jiangweishan.com</title>
    <style>
     body {
        margin: 0;
      }

      .wrapper {
        background-color: #2a2a35;
        height: 100vh;
        width: 100vw;
        transition: background-color 0.6s ease;
      }

      .table {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 280px;
        height: 10px;
        background: #8b4513;
        transform: translate(-50%, -50%);
        z-index: 2;
        box-shadow: 0px 2px 5px #111;
      }

      .candle {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 35px;
        height: 130px;
        background: #fff;
        transform-origin: center right;
        transform: translate(-50%, -100%);
        box-shadow: -2px 0px 0px #95c6f2 inset;
        border: 3px solid #673c63;
      }

      .candle-stick {
        width: 3px;
        height: 15px;
        background: #673c63;
        position: absolute;
        left: 50%;
        top: 0%;
        background: #673c63;
        border-radius: 8px;
        transform: translate(-50%, -100%);
      }

      label {
        background: #a5d6a7;
        padding: 0.5rem 1rem;
        border-radius: 0.5rem;
        position: absolute;
        font: 900 24px/1.4 -system-ui, sans-serif;
        transform: translate(50%, 50%);
        cursor: pointer;
        min-width: 100px;
        text-align: center;
      }

      .visually-hidden {
        position: absolute;
        left: -100vw;
      }

      input:checked + label {
        outline: 1px dotted red;
      }

      #toggle:checked ~ .wrapper {
        background: #ffffe0;
      }
      #toggle:checked ~ .wrapper .flame {
        opacity: 1;
      }

      .flame {
        width: 16px;
        height: 20px;
        background: #673c63;
        position: absolute;
        left: 50%;
        top: 0%;
        background: #e25822;
        transform: translate(-50%, -170%);
        border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
        animation: fire-flicker 0.2s infinite linear;
        opacity: 0;
        transition: opacity 0.6s ease;
      }

      @keyframes fire-flicker {
        from {
          background: #e25822;
          left: 47%;
        }
        to {
          background: #e2b822;
          left: 53%;
        }
      }
      label::after {
        content: "Lumos";
      }

      #toggle:checked ~ label::after {
        content: "Nox";
      }



    </style>
</head>
<body>
  <input id="toggle" type="checkbox"  class="visually-hidden">
  <label for="toggle"></label>
  <div class="wrapper">
    <div class="candle">
      <div class="candle-stick"></div>
      <div class="flame"></div>
    </div>
    <div class="table"></div>
  </div>

<script>
        
</script>
</body>
</html>

原文链接：https://www.icz.com/technicalinformation/web/html/2023/05/9801.html，转载请注明出处~~~
赏 0

猜你喜欢

深入探讨CSS3 transition使用规范
技术资讯

CSS3 transition，制作CSS3动画的基本要素，我们必须掌握的基本知识，今天主...
2023-06-05
【SVG】谈谈SVG中的雪碧图Sprite
技术资讯

Sprite(雪碧图)在Web运用中已不是新技术，但大部分同学都还停留在位图的Sprite运...
2023-06-05
谈谈关于CSS&CSS3中伪类选择器的应用
技术资讯

提到"伪类选器"，在平时的项目中用的太多了，比如:link，:focus，:hover，:af...
2023-06-05
【SVG】SVG中的结构化、分组和引用元素
技术资讯

SVG有自己结构化文档的方式。通过某些SVG元素，我们可以在文档中定义、分组以及引...
2023-06-05
【SVG】欣赏和学习SVG滤镜的艺术
技术资讯

经过近20年的发展，如今的网页排版，以其高密度的显示以及OpenType功能的支持，离...
2023-06-05
【SVG】教你给SVG 的内容添加CSS样式
技术资讯

SVG图形的一个最常见用例是图标系统，其中最常用的SVG sprite技术就是使用SVG<u...
2023-06-02
首页 发现 VIP 我的
注意：请收藏好网址www.icz.com，防止失联！站内免费资源持续上传中…！赞助我们
显示验证码
没有账号？注册  忘记密码？