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

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.

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.