css3绘制燃烧的蜡烛效果
分类：实例代码
分享一段代码实例，它实现了燃烧的蜡烛效果。
效果比较逼真，有摇曳的烛火的，还有下落的腊滴。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
body {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #402D35;
}
.container {
width: 160px;
height: 163px;
position: relative;
}
.candle {
width: 80px;
height: 140px;
background: #A65A51;
border-radius: 8px;
position: relative;
margin: auto;
z-index: 3;
}
.candle .top {
width: 80px;
height: 18px;
background: #b97871;
border-radius: 100%;
position: absolute;
top: -4px;
overflow: hidden;
}
.candle .top .top_inner {
width: 80px;
height: 16px;
background: #c28882;
border-radius: 100%;
position: absolute;
top: 4px;
}
.candle .bottom {
width: 80px;
height: 18px;
background: #A65A51;
border-radius: 100%;
position: absolute;
bottom: -4px;
}
.candle .wax-drip {
width: 9px;
height: 12px;
background: #c7928c;
position: absolute;
top: 10px;
left: 8px;
border-radius: 80% 0 55% 50%/55% 0 80% 50%;
-webkit-transform: rotateZ(0);
transform: rotateZ(0);
}
.candle .wax-drip .falling-wax {
width: 6px;
height: 6px;
position: absolute;
background: #c7928c;
top: 8px;
left: 1px;
border-radius: 80% 0 55% 50%/55% 0 80% 50%;
animation: waxDrop 5s linear infinite;
}
.wick {
width: 4px;
height: 15px;
background: #111;
position: absolute;
z-index: 5;
left: 50%;
top: -8px;
margin-left: -2px;
}
.flame {
width: 18px;
height: 18px;
background: #FFD678;
position: absolute;
z-index: 6;
border-radius: 80% 0 55% 50%/55% 0 80% 50%;
left: 50%;
top: -20px;
margin-left: -9px;
transform: rotateZ(-45deg);
animation: flameFlicker 0.9s ease infinite;
}
.flame .inner-flame {
width: 10px;
height: 10px;
background: #D1835C;
position: absolute;
z-index: 8;
border-radius: 80% 0 55% 50%/55% 0 80% 50%;
left: 50%;
margin-left: -7px;
bottom: 2px;
opacity: 0.4;
}
.outer-glow {
width: 200px;
height: 200px;
background: #6E4247;
position: absolute;
border-radius: 100%;
left: -20px;
top: -120px;
opacity: 0.2;
animation: glowFlicker 3s linear infinite;
transform-origin: center center;
}
.outer-glow .inner-outer-glow {
width: 70px;
height: 70px;
background: #8e555c;
position: absolute;
border-radius: 100%;
opacity: 1;
left: 50%;
margin-left: -35px;
top: 60px;
}
.plate {
width: 160px;
height: 40px;
background: #444;
border-radius: 100%;
position: absolute;
bottom: 5px;
z-index: 2;
}
.plate .plate-inner {
width: 90px;
height: 30px;
background: #4e4e4e;
border-radius: 100%;
position: absolute;
left: 50%;
margin-left: -45px;
bottom: 9px;
z-index: 2;
}
.plate-bottom {
width: 100px;
height: 40px;
background: #373737;
border-radius: 50%;
position: absolute;
bottom: 2px;
z-index: 1;
left: 50%;
margin-left: -50px;
}
@keyframes flameFlicker {
0%, 100% {
width: 16px;
height: 17px;
}
25% {
width: 19px;
height: 17px;
}
50% {
width: 17px;
height: 16px;
}
75% {
width: 17px;
height: 19px;
}
}
@keyframes glowFlicker {
0%, 100% {
opacity: 0.25;
}
50% {
opacity: 0.4;
-webkit-transform: scale(1.02);
transform: scale(1.02);
}
}
@keyframes waxDrop {
from {
-webkit-transform: translateY(0);
transform: translateY(0);
}
to {
-webkit-transform: translateY(120px);
transform: translateY(120px);
}
}
</style>
</head>
<body>
<div class="container">
<div class="flame">
<div class="inner-flame"></div>
</div>
<div class="outer-glow">
<div class="inner-outer-glow"></div>
</div>
<div class="wick"></div>
<div class="candle">
<div class="top">
<div class="top_inner"></div>
</div>
<div class="bottom"></div>
<div class="wax-drip">
<div class="falling-wax"></div>
</div>
</div>
<div class="plate">
<div class="lightning"></div>
<div class="plate-inner"></div>
</div>
<div class="plate-bottom"></div>
</div>
</body>
</html>
css3绘制燃烧的蜡烛效果，这样的场景在实际项目中还是用的比较多的，关于css3绘制燃烧的蜡烛效果就介绍到这了。
css3绘制燃烧的蜡烛效果属于前端实例代码，有关更多实例代码大家可以查看。