数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何使用 CSS 创建蜡烛动画效果？
网页动画可以在各种网页上看到。它们可以是访客滚动浏览网页时出现的微小网页动画，以吸引人们注意某个方面；也可以是演示产品的动画；或者是一段展示某些内容的促销网页动画，以有趣且引人入胜的方式进行展示。
在过去的 20 年里，现代在线动画技术取得了显著进步——性能、可用带宽和渲染质量都有所提高。不过，设计人员应谨慎使用，并且只有在动画能实质性地改善用户体验时才将其整合到网站中。
网页动画可以用来吸引观众的注意力，让他们保持更长时间的兴趣，并更有效地传达信息。与静态网页不同，它可以吸引并保持人们更长时间的注意力。网页动画应该流畅、有意义且自然，以支持用户体验。与静态网页相比，它可以吸引并保持观众更长时间的注意力，并且能够更清晰、更有效地传达信息。
在本文中，我们将使用纯 CSS 创建一个蜡烛动画效果。在这里，我们将使用 CSS 动画和其他一些属性来创建蜡烛火焰的闪烁和发光效果。
蜡烛动画
我们使用了 CSS 的以下属性来创建此效果。
:before 和 :after 伪类 - 用于在所选元素内容之前或之后添加内容。伪类用于为元素的指定部分设置样式。
CSS 动画 - CSS 的 animation 属性允许我们在特定时间间隔内更改元素的各种样式属性，从而使其产生动画效果。
@keyframes - 用于精确指定在给定时间段内动画期间发生的情况。这是通过声明动画期间某些特定“帧”的 CSS 属性来完成的，百分比从 0%（动画开始）到 100%（动画结束）。
滚动行为 - 当用户单击可滚动框内的链接时，scrollbehavior 属性指示滚动位置是应该平滑过渡还是直接跳转。
背景 - 使开发人员能够为元素添加背景效果。
盒子阴影 - 使开发人员能够为元素添加阴影。
圆角 - 用于定义元素的圆角半径。
变换 - 此属性用于为元素添加 2D 或 3D 变换。它允许你旋转、缩放、平移、移动、倾斜等元素。
Z 索引 – 用于设置定位元素的 z 顺序。
不透明度 - 用于指定元素的透明度或不透明度。
过滤器 - 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>
结论
在本文中，我们了解了如何仅使用 HTML 和 CSS 创建简单的燃烧蜡烛动画。
618 次浏览
