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

小编给大家分享一下怎么用纯CSS实现一个人独自行走的动画效果，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

　　代码解读

　　定义dom，容器中包含3个元素，分别代表头、身体和脚：

　　<divclass="man">

　　<spanclass="head"></span>

　　<spanclass="body"></span>

　　<spanclass="feet"></span>

　　</div>

　　居中显示：

　　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实现一个人独自行走的动画效果”有了一定的了解，如果想了解更多相关知识，欢迎关注编程网html频道，感谢各位的阅读！