您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章主要介绍怎么使用纯CSS代码实现蚊香燃烧的效果，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
代码解读
定义dom，容器中包含8个子元素：
<divclass="coil">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
居中显示：
body{
margin:0;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
background:radial-gradient(circleatcenter,midnightblue,black);
}
画出纹香盘要用的框线：
.coil{
position:relative;
display:flex;
justify-content:center;
}
.coilspan{
position:absolute;
width:calc((var(--n)*2-1)*1em);
height:calc((var(--n)-0.5)*1em);
border:1emsoliddarkgreen;
}
.coilspan:nth-child(1){
--n:1;
}
.coilspan:nth-child(2){
--n:2;
}
.coilspan:nth-child(3){
--n:3;
}
.coilspan:nth-child(4){
--n:4;
}
.coilspan:nth-child(5){
--n:5;
}
.coilspan:nth-child(6){
--n:6;
}
.coilspan:nth-child(7){
--n:7;
}
.coilspan:nth-child(8){
--n:8;
}
把一半框线放置到上方：
.coilspan:nth-child(odd){
align-self:flex-end;
}
删除掉上方框线的下边框，和下方框线的上边框：
.coilspan:nth-child(odd){
border-bottom:none;
}
.coilspan:nth-child(even){
border-top:none;
}
对齐上下边框：
.coilspan:nth-child(even){
transform:translateX(-1em);
}
把边框改为曲线：
.coilspan:nth-child(odd){
border-radius:50%50%00/100%100%00;
}
.coilspan:nth-child(even){
border-radius:0050%50%/00100%100%;
}
用伪元素画出蚊香最中间的部分：
.coil::before{
content:'';
position:absolute;
width:1em;
height:1em;
background-color:darkgreen;
border-radius:50%;
left:-1.5em;
top:-0.5em;
}
用伪元素画出蚊香的燃点：
.coil::after{
content:'';
position:absolute;
width:1em;
height:1em;
border-radius:50%;
top:-0.5em;
background-color:darkred;
left:-9.5em;
z-index:-1;
transform:scale(0.9);
box-shadow:001emwhite;
}
最后，为燃点增加闪动的效果：
.coil::after{
animation:blink1slinearinfinitealternate;
}
@keyframesblink{
to{
box-shadow:000white;
}
}
以上是“怎么使用纯CSS代码实现蚊香燃烧的效果”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。