CSS 如何创建蜡烛动画效果

在各种网页上都可以看到网页动画。它们可以是当访问者在网页上滚动时发生的小的网络动画，以引起对某一方面的注意，也可以是演示产品的动画，或者是以有趣和吸引人的方式展示某样东西的宣传网络动画。

在过去的20年里，现代在线动画技术有了很大的进步–性能、可用带宽和渲染质量都得到了改善。不过，设计师应该谨慎行事，只有在动画能实质性地改善用户体验的情况下，才应该将其纳入网站中。

网页动画可以用来抓住观众的注意力，让他们更有兴趣，并更有效地沟通。与静态的网页不同，它可能会吸引并保持人们的注意力更长的时间。用户体验应该得到网页动画的支持，它是流畅的、有意义的、流动的。与静态网页相比，它可能吸引并保持观众的注意力更久，并能更清楚有效地传达信息。

在这篇文章中，我们将使用纯CSS创建一个蜡烛动画效果。在这里，我们将使用CSS动画和其他一些属性来创建蜡烛火焰的闪烁和发光效果。

蜡烛动画

我们使用了以下的CSS属性来创造这样的效果。

:before 和 :after 伪类 --它用于在选定元素的内容之前或之后添加一些东西。伪类是用来对元素的指定部分进行样式化的。
CSS动画 - CSS的动画属性允许我们在一定的时间间隔内改变一个元素的各种样式属性，使其具有动画效果。
@keyframes - 它被用来指定在给定的时间段内动画所发生的确切内容。这是通过说明动画中某些特定 “帧 “的CSS属性来实现的，百分比从0%（动画的开始）到100%（动画的结束）。
滚动行为 - 当用户点击可滚动框内的链接时，滚动行为（scrollbehavior）属性表明滚动位置是否应该是平滑的动画，而不是直接跳跃。
**Background ** - 它使开发者能够为元素添加背景效果。
Box-shadow - 它使开发者能够为元素添加阴影。
Border- radius - 它用于定义元素的半径。
Transform - 这个属性用来给一个元素添加2D或3D转换。它允许你旋转，缩放，平移，移动，倾斜等元素。
Z-index – 它用于设置定位元素的Z-顺序。
Opacity - 它用于指定元素的透明度或不透明度。
filter - 过滤器属性使开发者能够为一个元素创建视觉效果（如对比度、模糊和饱和度）。

语法

filter: none | saturate() | blur() | contrast() | drop-shadow()| hue-rotate() | invert() | opacity()| grayscale() | sepia() | url()| brightness();

需要遵循的步骤

创建一个容器div类。
在容器类中，为蜡烛创建另一个类。
在其中，我们将创建4个类，用于创建灯芯、火焰、闪烁效果和火焰的光辉。
使用 :before 和 :after 伪类，创建火焰和蜡烛。
使用CSS动画为蜡烛提供发光的效果。

例子

下面的例子演示了如何创建蜡烛的动画效果。

<!DOCTYPE html>
<html>
<head>
   <title> Candle Animation </title>
   <style>
      html { font-size: 11px;}
      body { background: black;}
      .center {
         width: 100px;
         margin: 2px auto 2px;
      }
      .stand {
         position: relative;
         margin: 11rem auto 0;
         width: 130px;
         height: 400px;
      }
      .wax {
         bottom: 0;
         top: 0;
         left: 47%;
         width: 180px;
         height: 270px;
         border-radius: 150px / 40px;
         box-shadow: inset 10px -40px 20px 10px rgba(0, 0.3, 0.7, 0.3), inset -50px 0 60px 10px rgba(0, 1.0, 2.5, 0.7);
         background: #190f02;
         background: linear-gradient(#e47825, #ee8e0e, #633c73, #4c7a03 30%, #1c0960);
      }
      .flutter {
         width: 60px;
         height: 90px;
         left: 53%;
         top: 35rem;
         bottom: 100%;
         position: absolute;
         transform: translate(-40%);
         border-radius: 50%;
         background: #ff6100;
         filter: blur(40px);
         animation: flutter 0.2s infinite;
      }
      @keyframes flutter {
         40% {opacity: 0.6;}
      }
      .candlewick {
         width: 10px;
         height: 46px;
         position: absolute;
         top: 45rem;
         left: 55%;
         z-index: 1;
         border-radius: 30% 30% 10% 5%;
         transform: translate(-50%);
         background: #131312;
         background: linear-gradient(#d6894a, #4b532c, #131312, brown, #e8cb31 70%);
      }
      .blaze {
         width: 30px;
         height: 110px;
         left: 55%;
         top: 34rem;
         position: absolute;
         transform-origin: 52% 120%;
         transform: translate(-40%);
         border-radius: 51% 55% 22% 20%;
         background: rgba(254, 254, 254, 1);
         background: linear-gradient(white 70%, transparent);
         animation: blaze1 5s linear infinite, blaze2 6s linear infinite;
      }
      @keyframes blaze2 {
         0% {transform: translate(-40%) rotate(-3deg);}
         50% {transform: translate(-40%) rotate(3deg);}
         100% {transform: translate(-40%) rotate(-3deg);}
      }
      @keyframes blaze1 {
         0%, 100% {height: 138px;}
         50% {height: 158px;}
         100% {height: 138px; }
      }
      .blue {
         width: 30px;
         height: 70px;
         position: absolute;
         border-radius: 51% 51% 45% 45%;
         left: 55%;
         top: 42rem;
         transform: translate(-40%);
         background: rgba(1, 123, 253, .6);
         box-shadow: 1px -30px 40px 1px #dc8a0c, 1px 40px 50px 1px #dc8a0c, inset 4px 1px 5px 1px rgba(1, 123, 253, .7), inset -2px 1px 3px 1px rgba(1, 123, 253, .7);
      }
   </style>
</head>
<body>
   <section class= "center">
      <p class= "stand">
         <p class= "wax">
            <p class= "flutter"> </p>
            <p class= "candlewick"> </p>
            <p class= "blue"> </p>
            <p class= "blaze"> </p>
         </p>
      </p>
   </section>
</body>
</html>