How to use pure CSS code to realize the effect of mosquito incense burning
This article mainly introduces how to use pure CSS code to achieve mosquito incense burning effect, the article is very detailed, has a certain reference value, interested friends must read it!
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
}
}
The above is all the contents of this article entitled "how to use pure CSS code to achieve the effect of mosquito incense burning". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!
