How to use pure CSS to achieve a flag-waving animation effect (source code attached)

The content of this article is about how to use pure CSS to achieve a flag-waving animation effect (source code attached). It has certain reference value. Friends in need can refer to it. I hope it will be useful to you. Helps.

Effect preview

Source code download

https://github.com/comehope/front- end-daily-challenges

Code Interpretation

Define dom, the container contains 15 elements:

<div>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

Centered display:

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
}

Define container size:

.flag {
    width: 10em;
    height: 15em;
    font-size: 20px;
}

Set the line style:

.flag span {
    width: 0.25em;
    height: inherit;
    background-color: deepskyblue;
}

Make the lines tiled:

.flag {
    display: flex;
    justify-content: space-between;
}

Add 3d perspective effect:

.flag {
    transform: perspective(500px) rotateY(-20deg);
}

Define the animation effect of left and right movement:

.flag span {
    animation: wave 1.5s ease-in-out infinite alternate;
}

@keyframes wave {
    to {
        transform: translateX(2em);
    }
}

Set the element variable value:

.flag span:nth-child(1) {
    --n: 1;
}

.flag span:nth-child(2) {
    --n: 2;
}

/* 共 15 个元素，每元素的 --n 变量值等于它的序号。 */
/* 中间代码略 …… */

.flag span:nth-child(14) {
    --n: 14;
}

.flag span:nth-child(15) {
    --n: 15;
}

Let each line start the animation with a delay to form the effect of flying flags:

.flag span {
    animation-delay: calc(var(--n) * -0.1s);
}

Finally, add the light and shadow effect:

.flag span {
    background-color: ghostwhite;
}

@keyframes wave {
    to {
        transform: translateX(2em);
        background-color: deepskyblue;
    }
}

Done!

Related recommendations:

How to use pure CSS to achieve the button hover effect of the ball changing into a rectangular background (source code attached)

How to Using CSS and D3 to realize interactive animation of small fish swimming (with code)

The above is the detailed content of How to use pure CSS to achieve a flag-waving animation effect (source code attached). For more information, please follow other related articles on the PHP Chinese website!