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