素材图片
1.将小女孩图片截出来，在浏览器中居中显示，一个小女孩是96px
<body>
<div class="box">
</div>
</body>
body{
margin: 0;
}
.box{
background-image: url(images/run.jpg);
width: 96px;
height: 96px;
position: absolute;
left:50%;
top: 50%;
/*仅仅是左上角那一点居中*/
transform: translate(-50%,-50%);
/*向x,y轴（左上）移动自身的百分之50*/
}
2.然后实现小女孩移动的逐帧动画效果
动画就是从一个样式过渡到另一个样式，这里从坐标上可以看出来，从一个黄色框过渡到第二个，但是这样只是从图一平移到图四，并不能实现想要的逐帧动画效果。1个女孩是96px，四个女孩就是384px，animation-timing-function: steps(4);把384px分为四等分，动一次96px，所以background-position要从（0，0）到（0，-384）
编写动画效果
@keyframes forward {
from{
background-position: 0 0;
}
to{
background-position: -384px 0;
}
}
@keyframes backward {
from{
background-position: 0 -288px;
}
to{
background-position: -384px -288px;
}
}
@keyframes turnleft {
from{
background-position: 0 -96px;
}
to{
background-position: -384px -96px;
}
}
@keyframes turnright {
from{
background-position: 0 -192px;
}
to{
background-position: -384px -192px;
}
}
引用动画，在.box里添加代码
animation-name: backward;/*供测试*/
animation-duration:0.5s;
animation-timing-function: steps(4);
animation-iteration-count:infinite;
3.实现按下按键令小女孩改变移动方向
给小女孩绑定键盘按下事件，再根据键码判断上下左右来改变小女孩的朝向。添加js代码：
let girl=document.querySelector('.box');
document.onkeydown=function(event){
switch(event.keyCode){
//向上移动 backward
case 87:case 38:
girl.style.animationName='backward';
break;
//向下移动 forward
case 83:case 40:
girl.style.animationName='forward';
break;
//向左移动
case 65:case 37:
girl.style.animationName='turnleft';
break;
//向右移动
case 68:case 39:
girl.style.animationName='turnright';
break;
