溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下怎么用純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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
