這篇文章主要介紹怎么使用純CSS代碼實(shí)現(xiàn)蚊香燃燒的效果，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！
創(chuàng)新互聯(lián)建站是一家專(zhuān)注于成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)與策劃設(shè)計(jì),迎澤網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)建站做網(wǎng)站,專(zhuān)注于網(wǎng)站建設(shè)10余年,網(wǎng)設(shè)計(jì)領(lǐng)域的專(zhuān)業(yè)建站公司;建站業(yè)務(wù)涵蓋:迎澤等地區(qū)。迎澤做網(wǎng)站價(jià)格咨詢:13518219792
代碼解讀
定義dom，容器中包含8個(gè)子元素：
居中顯示：
body{
margin:0;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
background:radial-gradient(circleatcenter,midnightblue,black);
}
畫(huà)出紋香盤(pán)要用的框線：
.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;
}
對(duì)齊上下邊框：
.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%;
}
用偽元素畫(huà)出蚊香最中間的部分：
.coil::before{
content:'';
position:absolute;
width:1em;
height:1em;
background-color:darkgreen;
border-radius:50%;
left:-1.5em;
top:-0.5em;
}
用偽元素畫(huà)出蚊香的燃點(diǎn)：
.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;
}
最后，為燃點(diǎn)增加閃動(dòng)的效果：
.coil::after{
animation:blink1slinearinfinitealternate;
}
@keyframesblink{
to{
box-shadow:000white;
}
}
以上是“怎么使用純CSS代碼實(shí)現(xiàn)蚊香燃燒的效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
重慶分公司
重慶分公司
