189 8069 5689

怎么使用纯CSS代码实现蚊香燃烧的效果

这篇文章主要介绍怎么使用纯CSS代码实现蚊香燃烧的效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

创新互联建站是一家专注于成都网站建设、网站设计与策划设计,迎泽网站建设哪家好?创新互联建站做网站,专注于网站建设10余年,网设计领域的专业建站公司;建站业务涵盖:迎泽等地区。迎泽做网站价格咨询:13518219792

代码解读

定义dom,容器中包含8个子元素:

居中显示:

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代码实现蚊香燃烧的效果”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!


名称栏目:怎么使用纯CSS代码实现蚊香燃烧的效果
分享路径:http://cdxtjz.com/article/jsspgh.html

其他资讯