怎么用純CSS實現(xiàn)蚊香燃燒的效果

小編給大家分享一下怎么用純CSS實現(xiàn)蚊香燃燒的效果，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

    代碼解讀

    定義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實現(xiàn)蚊香燃燒的效果”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！