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

cssweb developmentfront end technology更新于 2025/1/18 22:04:17

网页动画常见于各种网页。它们可以是访客滚动浏览网页时出现的小型网页动画，用于吸引访客注意某个方面;可以是演示产品的动画;也可以是以一种有趣且引人入胜的方式展示产品的促销网页动画。

在过去的 20 年里，现代在线动画技术取得了显著进步——性能、可用带宽和渲染质量都有所提升。然而，设计师应谨慎使用动画，只有在动画能够显著提升用户体验的情况下，才应将其融入网站。

网页动画可以用来吸引访客的注意力，让他们更长时间地保持兴趣，并更有效地进行沟通。与静态网页不同，它可以吸引并长时间地留住访客的注意力。用户体验应该由流畅、有意义且流畅的网页动画来支持。与静态网页相比，它可以更长时间地吸引并维持浏览者的注意力，并能够更清晰有效地传达信息。

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

蜡烛动画

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

:before 和 :after 伪类 - 用于在所选元素的内容之前或之后添加内容。伪类用于设置元素指定部分的样式。
CSS 动画- CSS 的动画属性允许我们在特定时间间隔内更改元素的各种样式属性，从而赋予其动画效果。
@keyframes- 它用于精确指定在给定时间段内动画中发生的情况。这是通过声明动画期间某些特定"帧"的 CSS 属性来实现的，百分比从 0%(动画开始)到 100%(动画结束)。
滚动行为- 当用户点击可滚动框内的链接时，scrollbehavior 属性指示滚动位置是否应平滑动画而不是直接跳转。
背景- 它使开发人员能够为元素添加背景效果
Box-shadow- 它使开发人员能够为元素添加阴影。
Border-radius- 用于定义元素的半径。
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>