How to use pure CSS to implement a banner-like animation effect (with source)

This article brings you the content is about how to use the pure CSS to achieve similar to the banner of the animation effect (with source), there is a certain reference value, the need for friends can refer to, I hope to help you.

Effect Preview

Source code Download

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

Code interpretation

To define the DOM, the container contains 15 elements:

<div class= "Flag" >    <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>

Center display:

body {    margin:0;    HEIGHT:100VH;    Display:flex;    Align-items:center;    Justify-content:center;    Background-color:black;}

Define Container Dimensions:

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

To set the line style:

. flag span {    width:0.25em;    Height:inherit;    Background-color:deepskyblue;}

To tile a line:

. flag {    Display:flex;    Justify-content:space-between;}

Add 3d Perspective Effect:

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

Define animation effects for moving left and right:

. flag span {    animation:wave 1.5s ease-in-out infinite Alternate;} @keyframes Wave {to    {        Transform:translatex (2EM);    }}

To set the value of an element variable:

. Flag Span:nth-child (1) {    --n:1;}. Flag Span:nth-child (2) {    --n:2;} /* A total of 15 elements, the value of the--n variable for each element equals its ordinal number. *//* Intermediate code slightly ... */.flag span:nth-child () {    --n:14;}. Flag Span:nth-child {    --n:15;}

Let each line start the animation, respectively, the effect of the flag fluttering:

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

Finally, increase the lighting effect:

. flag span {    background-color:ghostwhite;} @keyframes Wave {to    {        Transform:translatex (2EM);        Background-color:deepskyblue;}    }

Done!