How to use pure CSS to realize the loader animation effect of a car (code attached)

Effect Preview

Source code Download

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

Code interpretation

Defines the DOM, which contains 1 .car elements, and its 2 child elements represent the body and the wheel:

<figure class= "Loader" >    <div class= "Car" >        <span class= "Body" ></span>        <span Class= "Wheels" ></span>    </div></figure>

Center display:

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

Define the size of the container and the color of the car:

. loader {    width:11.7em;    Height:4.2em;    Color:lightcyan;    Position:relative;}

Draw the chassis:

. car {    position:absolute;    Width:inherit;    Height:2em;    Background-color:currentcolor;    top:1.5em;    border-radius:0 5em 1em 0/0 4em 1em 0;}

Draw the tail Ji:

. car::before {    content: ';    Position:absolute;    width:0;    height:0;    Border:0.6em solid transparent;    border-left-width:0;    Border-right-color:currentcolor;    Transform-origin:left;    Transform:rotate ( -45deg);    Top: -0.5em;}

(It looks a bit like a plane at this point, haha ~ ~)

Draw the body:

. body {    position:absolute;    width:7.5em;    height:3.5em;    Box-sizing:border-box;    Border:0.4em solid;    Border-radius:3em 4.5em 0 0/3em 4em 0 0;    Top: -1.5em;    Left:1.2em;}

To draw a window with pseudo-elements:

. body::before {    content: ';    Position:absolute;    width:3.5em;    Height:inherit;    Background-color:currentcolor;    Border-top-left-radius:inherit;    Left: -0.4em;    Top: -0.4em;}

Draw the outline of the wheel:

. wheels::before,.wheels::after {    content: ';    Position:absolute;    Box-sizing:border-box;    Width:2.6em;    Height:2.6em;    Background-color: #333;    border-radius:50%;    Bottom: -1em;}

Draw the Hub:

. wheels::before,.wheels::after {    border:0.3em solid #333;    Background-image:         linear-gradient (            135deg,            transparent 45%,            currentcolor 46%, CurrentColor 54%,            Transparent 55%        ),        linear-gradient (            90deg,            transparent 45%,            CurrentColor 46%, CurrentColor 54%,            transparent 55%        ),        linear-gradient (            45deg,            transparent 45%,            CurrentColor 46%, CurrentColor 54%,            transparent 55%        ),        linear-gradient (            0deg,            Transparent 45%,            currentcolor 46%, CurrentColor 54%,            transparent 55%        ),        radial-gradient (            currentcolor 29%,            transparent 30%, transparent 50%,            currentcolor 51%        );}

Position the wheel to the left and right sides:

. wheels::before {    left:1.2em;}. wheels::after {    right:0.8em;}

Next, make the animation effect.

Adds a DOM element that represents a wind shadow .strikes , which contains 5 child elements:

<figure class= "Loader" >    <p class= "Car" >        <span class= "Body" ></span>        <span Class= "Wheels" ></span>    </p>    <p class= "strikes" >        <span></span>        <span></span>        <span></span>        <span></span>        <span></ Span>    </p></figure>

Draw a short thin line of 5 pieces:

. strikes {    position:absolute;    Width:1em;    Height:inherit;    border:1px dashed white;    Display:flex;    Flex-direction:column;    Justify-content:space-between;}. Strikes span {    height:0.1em;    Background-color:lightcyan;}

Increase the animation effect of Wind shadow My darling, define CSS variables, set animation delay:

. Strikes span {    animation:drift 0.2s linear infinite;    Animation-delay:calc ((Var (--n)-1) * 0.05s);} @keyframes Drift {from    {        transform:translate (3.5em);    }    to {        transform:translate ( -8em);        Filter:opacity (0);}    }. Strikes Span:nth-child (1) {    --n:1;}. Strikes Span:nth-child (2) {    --n:2;}. Strikes Span:nth-child (3) {    --n:3;}. Strikes Span:nth-child (4) {    --n:4;}. Strikes Span:nth-child (5) {    --n:5;}

Increase wheel rotation animation effect:

. wheels::before,.wheels::after {    animation:rotating 0.5s linear Infinite;} @keyframes Rotating {To    {        transform:rotate (1turn);    }}

Increase the animation effect of body bumps:

. car {    animation:run 0.25s linear Infinite;} @keyframes Run {    0% {        transform:translate (0.2em, 0.1em) rotate (0deg);    }    20% {        transform:translate (0.1em, 0.2em) rotate (1deg);    }    40% {        transform:translate (0.1em, -0.1em) rotate ( -1deg);    }    60% {        transform:translate ( -0.1em, 0.2em) rotate (0deg);    }    80% {        transform:translate ( -0.1em, 0.1em) rotate (1deg);    }    100% {        transform:translate (0.2em, 0.1em) rotate ( -1deg);    }}

Done!