How to use pure CSS to realize the animation effect similar to flag fluttering
This article will explain in detail how to use pure CSS to achieve similar flag flying animation effect, the editor thinks it is very practical, so share it for you to do a reference, I hope you can get something after reading this article.
Code interpretation
Define the dom, and the container contains 15 elements:
Centered display:
Body {
Margin:0
Height:100vh
Display:flex
Align-items:center
Justify-content:center
Background-color:black
}
Define the container size:
.flag {
Width:10em
Height:15em
Font-size:20px
}
Set the line style:
.flagspan {
Width:0.25em
Height:inherit
Background-color:deepskyblue
}
Let the lines tile:
.flag {
Display:flex
Justify-content:space-between
}
Add 3D perspective effect:
.flag {
Transform:perspective (500px) rotateY (- 20deg)
}
Define the animation effect of moving left and right:
.flagspan {
Animation:wave1.5sease-in-outinfinitealternate
}
@ keyframeswave {
To {
Transform:translateX (2em)
}
}
Set the value of the element variable:
.flagspan:nth-child (1) {
-- nRO 1
}
.flagspan:nth-child (2) {
-- nRO 2
}
/ * there are 15 elements, and the value of the-- n variable of each element is equal to its sequence number. , /
/ * the intermediate code is slightly. , /
.flagspan:nth-child (14) {
-- nRO 14
}
.flagspan:nth-child (15) {
-- nRO 15
}
Let each line delay to start the animation to form the effect of flag flying:
.flagspan {
Animation-delay:calc (var (--n) *-0.1s)
}
Finally, add light and shadow effects:
.flagspan {
Background-color:ghostwhite
}
@ keyframeswave {
To {
Transform:translateX (2em)
Background-color:deepskyblue
}
}
On "how to use pure CSS to achieve similar flag flying animation effect" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, please share it out for more people to see.
