48.纯 CSS 创作一盘传统蚊香-CSDN博客

原文地址：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: 0;
    padding: 0;
}
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: 1;
}
.coil span:nth-child(2) {
    --n: 2;
}
.coil span:nth-child(3) {
    --n: 3;
}
.coil span:nth-child(4) {
    --n: 4;
}
.coil span:nth-child(5) {
    --n: 5;
}
.coil span:nth-child(6) {
    --n: 6;
}
.coil span:nth-child(7) {
    --n: 7;
}
.coil span:nth-child(8) {
    --n: 8;
}