不断燃烧的蜡烛,不点进来看看就要灭了!

256 阅读6分钟

前言

这次带大家来实现一个生动的蜡烛燃烧的效果,纯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代码通过伪元素的使用,定义了火焰的下部和上部效果,使得整个蜡烛元素更加生动。

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

 @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 的关键帧动画。在这个动画中,对应于不同的百分比,heighttop 属性在状态之间进行设置。通过0%100% 的设定使得动画的起始和结束状态分别具有12em的高度和 -12emtop属性,而在50% 的时候分别具有14em的高度和 -13emtop属性。这使得火焰在动画周期中的高度与位置发生改变。

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

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