源代码下载

 

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

 

　　代码解读

 

　　定义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);

 

　　}

 

　　}









本文转载自中文网