代码解读

 

　　定义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;

 

　　}

 

　　}

 

　　大功告成！







本文转载自中文网