如何使用CSS创建蜡烛动画效果

网页动画可以在各种网页上看到。它们可以是在访问者滚动网页时出现的小型网页动画，以吸引注意力，可以是演示产品的动画，或者是展示有趣而引人入胜的内容的促销网页动画。

在过去的20年里，现代在线动画技术取得了显著的进步-性能、可用带宽和渲染质量都有所提高。设计师应谨慎使用动画，只有在它实质性地改善用户体验时才应将其纳入网站。

网页动画可以用来吸引观众的注意力，让他们更长时间地保持兴趣，并更有效地传达信息。与静态网页不同，它可以吸引并保持人们的注意力更长时间。用户体验应该由流畅、有意义和连贯的网页动画来支持。与静态网页相比，它可以更长时间地吸引和保持观众的注意力，并能更清晰、更有效地传达信息。

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

蜡烛动画

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

:before和:after伪类 - 它用于在所选元素的内容之前或之后添加一些内容。伪类用于对元素的指定部分进行样式设置。
CSS动画 - CSS的animation属性允许我们在一定的时间间隔内改变元素的各种样式属性，从而给它带来动画效果。
@keyframes - 它用于指定在给定时间段内动画中确切发生的事情。通过在动画期间为某些特定的“帧”指定CSS属性，可以达到这个目的，百分比从0%（动画开始）到100%（动画结束）。
滚动行为 - 当用户在可滚动框内点击链接时，scrollbehavior属性表示滚动位置是否应该平滑地动画化，而不是直接跳转。
背景 - 它使开发人员能够向元素添加背景效果。
Box-shadow - 它使开发人员能够向元素添加阴影。
边框半径 - 它用于定义元素的半径。
Transform - 此属性用于向元素添加2D或3D变换。它允许您旋转、缩放、平移、移动、倾斜等元素。
Z-index – 用于设置定位元素的Z轴顺序。
Opacity - 用于指定元素的透明度。
Filter - 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>