怎么用纯CSS实现一个人独自行走的动画效果

居中显示：

body{

margin:0;

height:100vh;

display:flex;

align-items:center;

justify-content:center;

background:radial-gradient(lightgray20%,whitesmoke);

}

定义容器尺寸：

.man{

width:12em;

height:33em;

font-size:10px;

position:relative;

}

定义主色：

.man{

color:white;

}

画出头部：

.head{

position:absolute;

width:7em;

height:7em;

background-color:currentColor;

border-radius:50%;

right:0;

}

画出身体：

.body{

position:absolute;

width:6.2em;

height:14.4em;

background-color:currentColor;

top:7em;

border-radius:100%20%00;

}

画出脚，现在只能看到一只脚，是因为两只脚重叠在一起，一会儿动起来时就能看到两只脚了：

.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;

}

用伪元素画出阴影：

.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%;

}

接下来增加动画效果。

增加行走的动画效果，并使两只脚的动画时间交错：

.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);

}

}

增加头和身体起伏的动画效果：

.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);

}

}

增加阴影面积随身体运动而变化的动画效果：

.man::before{

animation:shadow-animate4sease-in-outinfinite;

}

@keyframesshadow-animate{

0%,50%,100%{

transform:scale(1);

}

25%,75%{

transform:scale(1.15);

}

}

看完了这篇文章，相信你对“怎么用纯CSS实现一个人独自行走的动画效果”有了一定的了解，如果想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！

分享题目：怎么用纯CSS实现一个人独自行走的动画效果
本文地址：http://kswjz.com/article/gdopgh.html