不断燃烧的蜡烛

这篇文章主要介绍了纯 CSS 实现蜡烛燃烧效果的过程。包括 HTML 中用不同类描述蜡烛各部分，CSS 中设置蜡烛、蜡烛芯、火焰、发光等元素的样式及相应动画，如火焰的扭动和大小变化、发光的闪烁效果等，最后提及可在现有基础上创新和在码上掘金查看完整代码。

关联问题: 如何改蜡烛颜色 能否增加火焰效果 怎样优化发光效果

#前言

这次带大家来实现一个生动的蜡烛燃烧的效果，纯CSS实现，通过动画来展现出一个燃烧的蜡烛，话不多说，我们直接进入主题

#效果预览

最终实现的效果如下所示。

#HTML部分

首先我们看到HTML部分，相关代码如下。

复制 <div class="candle">
      <span class="glow"></span>
      <span class="flames"></span>
      <span class="thread"></span>
    </div>

这里描述了一个简单的蜡烛元素。使用 candle 类来描述蜡烛的整体外观，使用 glow 类来表示蜡烛的光晕或者烛光发光的样式。使用 flames 类来表示蜡烛的火焰。使用 thread 类来表示蜡烛的蜡烛芯或者蜡烛的燃烧丝。

综上所述，以上通过使用不同的span元素和类来描述蜡烛的外观和细节。

#CSS部分

紧接着我们看到CSS部分，首先是candle类的样式，相关代码如下。

复制  .candle {
      width: 15em;
      height: 30em;
      font-size: 10px;
      background: linear-gradient(
        orange,
        darkorange,
        sienna,
        saddlebrown 50%,
        rgba(0, 0, 0, 0.6)
      );
      box-shadow: inset 2em -3em 5em rgba(0, 0, 0, 0.4),
        inset -2em 0 5em rgba(0, 0, 0, 0.4);
      border-radius: 10em / 4em;
      position: relative;
      display: flex;
      justify-content: center;
      top: 10em;
    }
    .candle::before {
      content: "";
      position: absolute;
      width: inherit;
      height: 5em;
      border: 0.2em solid darkorange;
      border-radius: 50%;
      box-sizing: border-box;
      background: radial-gradient(
        #444,
        orange,
        saddlebrown,
        sienna,
        darkorange
      );
      filter: opacity(0.7);
    }

它设置了蜡烛元素的大小、背景颜色（使用线性渐变）、阴影效果、圆角边框和相对定位。这使得蜡烛元素看起来更具立体感。

除此之外，.candle类使用 ::before 伪元素来创建蜡烛的燃烧部分。它设置了伪元素的尺寸、边框样式、圆角效果以及背景的径向渐变颜色，这些属性使得蜡烛看起来更加逼真。

总的来说，这里创建了一个具有立体感的蜡烛元素，它结合了线性渐变、阴影和伪元素等技术，以呈现出蜡烛的外观效果。

然后是火炬的蜡烛芯（.thread）和火焰（.flames）的样式，相关代码如下。

复制 .thread {
      position: absolute;
      width: 0.6em;
      height: 3.6em;
      top: -1.8em;
      background: linear-gradient(#111, black, orange 90%);
      border-radius: 40% 40% 0 0;
    }

    .flames {
      position: absolute;
      width: 2.4em;
    }

.thread设置了蜡烛芯的样式，包括尺寸、位置、背景颜色（使用线性渐变）和圆角边框。通过设置适当的尺寸和位置，它模拟了蜡烛的蜡烛芯。

.flames定义了火焰的样式，设置了宽度。实际上，这里并不完整，缺少了对火焰样式的定义，而是把该部分放在了对应的伪元素中，例如颜色和形状，这一部分接下来我们会提到。

总的来说，这里定义了火炬的蜡烛芯和火焰的样式，使得蜡烛元素看起来更加真实。

接下来我们就定义了 flames 的 ::before 和 ::after 伪元素，用于创建更真实的火焰效果，也就是刚刚上面提及到的对火焰样式的定义。

复制.flames::before {
      content: "";
      position: absolute;
      width: inherit;
      height: 6em;
      background-color: royalblue;
      top: -4.8em;
      border-radius: 50% 50% 35% 35%;
      border: 0.2em solid dodgerblue;
      box-sizing: border-box;
      filter: opacity(0.7);
    }
    .flames::after {
      content: "";
      position: absolute;
      width: inherit;
      height: 12em;
      top: -12em;
      background: linear-gradient(white 80%, transparent);
      border-radius: 50% 50% 20% 20%;
      box-shadow: 0 -0.6em 0.4em darkorange;
      animation: enlarge 5s linear infinite, move 6s linear infinite;
    }

.flames::before使用 ::before 伪元素来创建火焰的底部部分，包括宽度、高度、背景颜色、位置、圆角边框、边框样式和透明度。这一部分表示火焰的较低部分。

.flames::after 使用 ::after 伪元素来创建火焰的上部分，包括宽度、高度、位置、背景（使用线性渐变）、圆角边框、阴影效果和动画属性。这一部分表示火焰的上方部分，其中动画属性使得火焰可以动态演变。

综合这两者，这段CSS代码通过伪元素的使用，定义了火焰的下部和上部效果，使得整个蜡烛元素更加生动。

接着就是上面伪元素涉及到的动画部分了，这里定义了两个关键帧动画，move 和 enlarge。相关代码如下。

复制 @keyframes move {
      0%,
      100% {
        transform: rotate(2deg);
      }

      50% {
        transform: rotate(-2deg);
      }
    }
    @keyframes enlarge {
      0%,
      100% {
        height: 12em;
        top: -12em;
      }

      50% {
        height: 14em;
        top: -13em;
      }
    }

• 这段动画定义了一个名为 move 的关键帧动画。在这个动画中，对应于不同的百分比，transform 属性的 rotate 函数被用来使火焰在垂直方向上略微旋转。通过0% 和100% 的设定使得火焰在动画周期的初始和结束状态下旋转2度，而在50% 的时候让火焰逆时针旋转2度。

• 这段动画定义了一个名为 enlarge 的关键帧动画。在这个动画中，对应于不同的百分比，height 和 top 属性在状态之间进行设置。通过0% 和100% 的设定使得动画的起始和结束状态分别具有12em的高度和 -12em的top属性，而在50% 的时候分别具有14em的高度和 -13em的top属性。这使得火焰在动画周期中的高度与位置发生改变。

这两条动画结合起来使得火焰看起来不断地在扭动和变大、变小，赋予了火焰更加生动和生长的视觉效果。

最后看到发光的.glow类的相关样式，使用了关键帧动画(@keyframes blink）。相关代码如下。

复制.glow {
      position: absolute;
      width: 10em;
      height: 18em;
      background-color: orangered;
      border-radius: 50%;
      top: -17em;
      filter: blur(6em);
      animation: blink 100ms infinite;
    }
    @keyframes blink {
      to {
        filter: blur(6em) opacity(0.8);
      }
    }

.glow 设置了元素的属性，包括尺寸、颜色、圆角边框、位置、模糊效果和动画。

• position: absolute 将使得这个元素基于它的最近的父级定位的元素进行定位。
• filter: blur(6em) 赋予元素一个模糊的效果
• animation: blink 100ms infinite 将使得这个元素应用blink关键帧动画。这表示元素在100ms内不断地从起始状态到结束状态之间进行变化。

@keyframes blink { ... }定义了关键帧动画 blink。通过 to 关键字表示动画效果最终的状态。在这个动画中，使用 filter 属性实现了一个闪烁的效果，即不断地在模糊和半透明间切换，给人一种闪烁的视觉效果。

综合这两者，这段代码实现了一个闪烁的发光效果，可以让蜡烛看起来更加立体和逼真。

#总结

以上就是整个效果的实现过程了，纯 CSS 实现，代码简单易懂。另外，感兴趣的小伙伴们还可以在现有基础上发散思维，比如增加点其他效果，或者更改颜色等等。关于该效果如果大家有更好的想法欢迎在评论区分享，互相学习。最后，完整代码在码上掘金里可以查看，如果有什么问题大家在评论区里讨论~