原文地址：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;}48.纯 CSS 创作一盘传统蚊香
原文地址：https://www.cnblogs.com/FlyingLiao/p/10474284.html