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

Editor to share with you how to use pure CSS to achieve the animation effect of walking alone, I hope you will gain something after reading this article, let's discuss it together!

Code interpretation

Define dom. The container contains three elements, representing head, body and feet:

Centered display:

Body {

Margin:0

Height:100vh

Display:flex

Align-items:center

Justify-content:center

Background:radial-gradient (lightgray20%,whitesmoke)

}

Define the container size:

.man {

Width:12em

Height:33em

Font-size:10px

Position:relative

}

Define the dominant 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

}

When you draw a foot, you can only see one foot now, because the two feet overlap each other, and you can see both feet when you move:

.feet:: before

.feet:: after {

Content:''

Position:absolute

Width:4em

Height:1.4em

Background-color:white

Bottom:0

Left:-1.6em

Border-radius:1em80%0.4em0.4em

}

To draw shadows with pseudo elements:

.man:: before {

Content:''

Position:absolute

Width:12em

Height:0.8em

Background-color:rgba (0. 0. 1)

Bottom:-0.2em

Left:-3em

Border-radius:50%

}

Next, add animation effects.

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

.feet:: before

.feet:: after {

Animation:feet-animation2sease-in-outinfinite

}

.feet:: after {

Animation-delay:1s

}

@ keyframesfeet-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 head and body ups and downs:

.head

.body {

Animation:body-animation4sease-in-outinfinite

}

@ keyframesbody-animation {

0% 100% {

Transform:translateY (0) skewX (- 2deg)

}

25% 75% {

Transform:translateY (0.5em) skewX (0deg)

}

50% {

Transform:translateY (0) skewX (0deg)

}

}

Increase the animation effect that the shadow area varies with the movement of the body:

.man:: before {

Animation:shadow-animate4sease-in-outinfinite

}

@ keyframesshadow-animate {

0% 50% 50% 100% {

Transform:scale (1)

}

25% 75% {

Transform:scale (1.15)

}

}

After reading this article, I believe you have a certain understanding of "how to use pure CSS to achieve the animation effect of walking alone". If you want to know more about it, welcome to follow the industry information channel, thank you for reading!

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.