这篇文章主要介绍了纯 CSS 实现蜡烛燃烧效果的过程。包括 HTML 中用不同类描述蜡烛各部分，CSS 中设置蜡烛、蜡烛芯、火焰、发光等元素的样式及相应动画，如火焰的扭动和大小变化、发光的闪烁效果等，最后提及可在现有基础上创新和在码上掘金查看完整代码。
关联问题: 如何改蜡烛颜色 能否增加火焰效果 怎样优化发光效果
前言
这次带大家来实现一个生动的蜡烛燃烧的效果，纯CSS实现，通过动画来展现出一个燃烧的蜡烛，话不多说，我们直接进入主题
效果预览
最终实现的效果如下所示。
HTML部分
首先我们看到HTML部分，相关代码如下。
1 <div class="candle">
2 <span class="glow"></span>
3 <span class="flames"></span>
4 <span class="thread"></span>
5 </div>
这里描述了一个简单的蜡烛元素。使用 candle 类来描述蜡烛的整体外观，使用 glow 类来表示蜡烛的光晕或者烛光发光的样式。使用 flames 类来表示蜡烛的火焰。使用 thread 类来表示蜡烛的蜡烛芯或者蜡烛的燃烧丝。
综上所述，以上通过使用不同的span元素和类来描述蜡烛的外观和细节。
CSS部分
紧接着我们看到CSS部分，首先是candle类的样式，相关代码如下。
1 .candle {
2 width: 15em;
3 height: 30em;
4 font-size: 10px;
5 background: linear-gradient(
6 orange,
7 darkorange,
8 sienna,
9 saddlebrown 50%,
10 rgba(0, 0, 0, 0.6)
11 );
12 box-shadow: inset 2em -3em 5em rgba(0, 0, 0, 0.4),
13 inset -2em 0 5em rgba(0, 0, 0, 0.4);
14 border-radius: 10em / 4em;
15 position: relative;
16 display: flex;
17 justify-content: center;
18 top: 10em;
19 }
20 .candle::before {
21 content: "";
22 position: absolute;
23 width: inherit;
24 height: 5em;
25 border: 0.2em solid darkorange;
26 border-radius: 50%;
27 box-sizing: border-box;
28 background: radial-gradient(
29 #444,
30 orange,
31 saddlebrown,
32 sienna,
33 darkorange
34 );
35 filter: opacity(0.7);
36 }
它设置了蜡烛元素的大小、背景颜色（使用线性渐变）、阴影效果、圆角边框和相对定位。这使得蜡烛元素看起来更具立体感。
除此之外，.candle类使用 ::before 伪元素来创建蜡烛的燃烧部分。它设置了伪元素的尺寸、边框样式、圆角效果以及背景的径向渐变颜色，这些属性使得蜡烛看起来更加逼真。
总的来说，这里创建了一个具有立体感的蜡烛元素，它结合了线性渐变、阴影和伪元素等技术，以呈现出蜡烛的外观效果。
然后是火炬的蜡烛芯（.thread）和火焰（.flames）的样式，相关代码如下。
1 .thread {
2 position: absolute;
3 width: 0.6em;
4 height: 3.6em;
5 top: -1.8em;
6 background: linear-gradient(#111, black, orange 90%);
7 border-radius: 40% 40% 0 0;
8 }
9
10 .flames {
11 position: absolute;
12 width: 2.4em;
13 }
.thread设置了蜡烛芯的样式，包括尺寸、位置、背景颜色（使用线性渐变）和圆角边框。通过设置适当的尺寸和位置，它模拟了蜡烛的蜡烛芯。
.flames定义了火焰的样式，设置了宽度。实际上，这里并不完整，缺少了对火焰样式的定义，而是把该部分放在了对应的伪元素中，例如颜色和形状，这一部分接下来我们会提到。
总的来说，这里定义了火炬的蜡烛芯和火焰的样式，使得蜡烛元素看起来更加真实。
接下来我们就定义了 flames 的 ::before 和 ::after 伪元素，用于创建更真实的火焰效果，也就是刚刚上面提及到的对火焰样式的定义。
1.flames::before {
2 content: "";
3 position: absolute;
4 width: inherit;
5 height: 6em;
6 background-color: royalblue;
7 top: -4.8em;
8 border-radius: 50% 50% 35% 35%;
9 border: 0.2em solid dodgerblue;
10 box-sizing: border-box;
11 filter: opacity(0.7);
12 }
13 .flames::after {
14 content: "";
15 position: absolute;
16 width: inherit;
17 height: 12em;
18 top: -12em;
19 background: linear-gradient(white 80%, transparent);
20 border-radius: 50% 50% 20% 20%;
21 box-shadow: 0 -0.6em 0.4em darkorange;
22 animation: enlarge 5s linear infinite, move 6s linear infinite;
23 }
.flames::before使用 ::before 伪元素来创建火焰的底部部分，包括宽度、高度、背景颜色、位置、圆角边框、边框样式和透明度。这一部分表示火焰的较低部分。
.flames::after 使用 ::after 伪元素来创建火焰的上部分，包括宽度、高度、位置、背景（使用线性渐变）、圆角边框、阴影效果和动画属性。这一部分表示火焰的上方部分，其中动画属性使得火焰可以动态演变。
综合这两者，这段CSS代码通过伪元素的使用，定义了火焰的下部和上部效果，使得整个蜡烛元素更加生动。
接着就是上面伪元素涉及到的动画部分了，这里定义了两个关键帧动画，move 和 enlarge。相关代码如下。
1 @keyframes move {
2 0%,
3 100% {
4 transform: rotate(2deg);
5 }
6
7 50% {
8 transform: rotate(-2deg);
9 }
10 }
11 @keyframes enlarge {
12 0%,
13 100% {
14 height: 12em;
15 top: -12em;
16 }
17
18 50% {
19 height: 14em;
20 top: -13em;
21 }
22 }
-
这段动画定义了一个名为
move的关键帧动画。在这个动画中，对应于不同的百分比，transform属性的rotate函数被用来使火焰在垂直方向上略微旋转。通过0% 和100% 的设定使得火焰在动画周期的初始和结束状态下旋转2度，而在50% 的时候让火焰逆时针旋转2度。 -
这段动画定义了一个名为
enlarge的关键帧动画。在这个动画中，对应于不同的百分比，height和top属性在状态之间进行设置。通过0% 和100% 的设定使得动画的起始和结束状态分别具有12em的高度和 -12em的top属性，而在50% 的时候分别具有14em的高度和 -13em的top属性。这使得火焰在动画周期中的高度与位置发生改变。
这两条动画结合起来使得火焰看起来不断地在扭动和变大、变小，赋予了火焰更加生动和生长的视觉效果。
最后看到发光的.glow类的相关样式，使用了关键帧动画(@keyframes blink）。相关代码如下。
1.glow {
2 position: absolute;
3 width: 10em;
4 height: 18em;
5 background-color: orangered;
6 border-radius: 50%;
7 top: -17em;
8 filter: blur(6em);
9 animation: blink 100ms infinite;
10 }
11 @keyframes blink {
12 to {
13 filter: blur(6em) opacity(0.8);
14 }
15 }
.glow 设置了元素的属性，包括尺寸、颜色、圆角边框、位置、模糊效果和动画。
position: absolute将使得这个元素基于它的最近的父级定位的元素进行定位。filter: blur(6em)赋予元素一个模糊的效果animation: blink 100ms infinite将使得这个元素应用blink关键帧动画。这表示元素在100ms内不断地从起始状态到结束状态之间进行变化。
@keyframes blink { ... }定义了关键帧动画 blink。通过 to 关键字表示动画效果最终的状态。在这个动画中，使用 filter 属性实现了一个闪烁的效果，即不断地在模糊和半透明间切换，给人一种闪烁的视觉效果。
综合这两者，这段代码实现了一个闪烁的发光效果，可以让蜡烛看起来更加立体和逼真。
总结
以上就是整个效果的实现过程了，纯 CSS 实现，代码简单易懂。另外，感兴趣的小伙伴们还可以在现有基础上发散思维，比如增加点其他效果，或者更改颜色等等。关于该效果如果大家有更好的想法欢迎在评论区分享，互相学习。最后，完整代码在码上掘金里可以查看，如果有什么问题大家在评论区里讨论~