How to use pure CSS to achieve a person walking alone animation effect (with source)

This article brings you the content is about how to use the pure CSS to achieve a person walking alone animation effect (with source), there is a certain reference value, the need for a friend can refer to, I hope you have some help.

Effect Preview

Source code Download

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

Code interpretation

Defines the DOM, which contains 3 elements, representing the head, body, and feet, respectively:

<div class= "man" >    <span class= "Head" ></span>    <span class= "Body" ></span>    <span class= "feet" ></span></div>

Center display:

body {    margin:0;    HEIGHT:100VH;    Display:flex;    Align-items:center;    Justify-content:center;    Background:radial-gradient (Lightgray 20%, WhiteSmoke);}

Define Container Dimensions:

. man {    width:12em;    Height:33em;    font-size:10px;    Position:relative;}

To define a primary color:

. man {    color:white;}

Draw the head:

. head {    position:absolute;    Width:7em;    Height:7em;    Background-color:currentcolor;    border-radius:50%;    right:0;}

Draw the body:

. body {    position:absolute;    Width:6.2em;    Height:14.4em;    Background-color:currentcolor;    Top:7em;    border-radius:100% 20% 0 0;}

Draw the foot, now only see one foot, because the two feet overlap together, a moment to move up can see two feet:

. feet::before,.feet::after {    content: ';    Position:absolute;    Width:4em;    Height:1.4em;    Background-color:white;    bottom:0;    Left: -1.6em;    Border-radius:1em 80% 0.4em 0.4em;}

To draw a shadow with a pseudo-element:

. man::before {    content: ';    Position:absolute;    Width:12em;    Height:0.8em;    Background-color:rgba (0, 0, 0, 0.1);    Bottom: -0.2em;    Left: -3em;    border-radius:50%;}

Next, increase the animation effect.

Increase the animation effect of walking and stagger the animation time of the two feet:

. feet::before,.feet::after {    animation:feet-animation 2s ease-in-out infinite;}. feet::after {    animation-delay:1s;} @keyframes feet-animation {    20% {        Transform:translatex (3.4em) translatey ( -1.6em) rotate (4deg);    }    30% {        Transform:translatex (4.6em) translatey ( -1em) rotate (0deg);    }    40% {        Transform:translatex (5.6em) translatey ( -0.6em) rotate (4deg);    }    44% {        Transform:translatex (5.6em) translatey (0) rotate (0deg);}    }

Increase the animation of the head and body undulation:

. head,.body {    animation:body-animation 4s ease-in-out Infinite;} @keyframes body-animation {    0, 100% {        transform:translatey (0) skewx ( -2deg);    }    25%, 75% {        transform:translatey (0.5em) skewx (0deg);    }    50% {        transform:translatey (0) skewx (0deg);    }}

Animate the shadow area as it moves with your body:

. man::before {    animation:shadow-animate 4s ease-in-out Infinite;} @keyframes Shadow-animate {    0, 50%, 100% {        transform:scale (1);    }    25%, 75% {        transform:scale (1.15);    }}

Done!