How to use pure CSS to realize the effect of mosquito incense burning
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!
