原文地址：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;}