原文地址：https://segmentfault.com/a/1190000015246974
感想： 都是半圆边框合成的。
HTML code：
<div class="coil">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
CSS code：
html, body {
margin:;
padding:;
}
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: radial-gradient(circle at center, midnightblue, black);
}
.coil{
position: relative;
display: flex;
justify-content: center;
}
.coil::before,
.coil::after {
content: '';
position: absolute;
border-radius: 50%;
width: 1em;
height: 1em;
top: -0.5em;
}
/* 蚊香中间部分 */
.coil::before{
left: -2em;
background: darkgreen;
}
/* 蚊香的燃点 */
.coil::after{
left: -10em;
background: darkred;
box-shadow: 0 0 1em white;
transform: scale(0.9);
box-shadow: 0 0 1em white;
animation: blink 1.5s ease-in-out infinite alternate;
z-index: -1;
}
@keyframes blink{
to{
box-shadow: 0 0 0 white;
}
}
.coil span{
position: absolute;
width: calc((var(--n) * 2 -1) * 1em);
height: calc((var(--n) -0.5) * 1em);
border: 1em solid darkgreen;
}
/* 将一半框线放置上方 */
.coil span:nth-child(odd){
align-self: flex-end;
border-bottom: none;
border-radius: 50% 50% 0 0 / 100% 100% 0 0 ;
}
.coil span:nth-child(even){
border-top: none;
/* 对齐上下边框 */
transform: translateX(-1em);
border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
.coil span:nth-child(1){
--n:;
}
.coil span:nth-child(2) {
--n:;
}
.coil span:nth-child(3) {
--n:;
}
.coil span:nth-child(4) {
--n:;
}
.coil span:nth-child(5) {
--n:;
}
.coil span:nth-child(6) {
--n:;
}
.coil span:nth-child(7) {
--n:;
}
.coil span:nth-child(8) {
--n:;
}