怎么使用純CSS代碼實(shí)現(xiàn)蚊香燃燒的效果

這篇文章主要介紹怎么使用純CSS代碼實(shí)現(xiàn)蚊香燃燒的效果，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

　　代碼解讀

　　定義dom，容器中包含8個(gè)子元素：

　　<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;

　　}

　　用偽元素畫出蚊香的燃點(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)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！