Shulou(Shulou.com)06/01 Report--

Editor to share with you how to use pure CSS to achieve the effect of mosquito incense burning, I hope you will gain something after reading this article, let's discuss it together!

Code interpretation

Define dom, and the container contains 8 child elements:

Centered display:

Body {

Margin:0

Height:100vh

Display:flex

Align-items:center

Justify-content:center

Background:radial-gradient (circleatcenter,midnightblue,black)

}

Draw the lines to be used in the incense plate:

.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) {

-- nRO 1

}

.coilspan:nth-child (2) {

-- nRO 2

}

.coilspan:nth-child (3) {

-- nRO 3

}

.coilspan:nth-child (4) {

-- nRO 4

}

.coilspan:nth-child (5) {

-- nRO 5

}

.coilspan:nth-child (6) {

-- nRO 6

}

.coilspan:nth-child (7) {

-- nRO 7

}

.coilspan:nth-child (8) {

-- nRO 8

}

Place half of the frame line above:

.coilspan:nth-child (odd) {

Align-self:flex-end

}

Remove the lower border of the upper border line and the upper border of the lower border line:

.coilspan:nth-child (odd) {

Border-bottom:none

}

.coilspan:nth-child (even) {

Border-top:none

}

Align the upper and lower borders:

.coilspan:nth-child (even) {

Transform:translateX (- 1em)

}

Change the border to a curve:

.coilspan:nth-child (odd) {

Border-radius:50%50/1000

}

.coilspan:nth-child (even) {

Border-radius:0050%50%/001000%

}

Draw the middle part of mosquito-repellent incense with pseudo elements:

.coil:: before {

Content:''

Position:absolute

Width:1em

Height:1em

Background-color:darkgreen

Border-radius:50%

Left:-1.5em

Top:-0.5em

}

Draw the burning point of mosquito incense with pseudo elements:

.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

}

Finally, add the flicker effect to the ignition:

.coil:: after {

Animation:blink1slinearinfinitealternate

}

@ keyframesblink {

To {

Box-shadow:000white

}

}

After reading this article, I believe you have a certain understanding of "how to use pure CSS to achieve the effect of mosquito incense burning". If you want to know more about it, welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.