前言
这次带大家来实现一个生动的蜡烛燃烧的效果，纯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 实现，代码简单易懂。另外，感兴趣的小伙伴们还可以在现有基础上发散思维，比如增加点其他效果，或者更改颜色等等。关于该效果如果大家有更好的想法欢迎在评论区分享，互相学习。最后，完整代码在码上掘金里可以查看，如果有什么问题大家在评论区里讨论~
