怎么用纯CSS实现一个人独自行走的动画效果
小编给大家分享一下怎么用纯CSS实现一个人独自行走的动画效果，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！
代码解读
定义dom，容器中包含3个元素，分别代表头、身体和脚：
居中显示：
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;
}
画出脚，现在只能看到一只脚，是因为两只脚重叠在一起，一会儿动起来时就能看到两只脚了：
.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实现一个人独自行走的动画效果"有了一定的了解，如果想了解更多相关知识，欢迎关注行业资讯频道，感谢各位的阅读！
