@-webkit-keyframes person-slow {
0% {
background-position: -0px -291px;
}
25% {
background-position: -602px -0px;
}
50% {
background-position: -302px -291px;
}
75% {
background-position: -151px -291px;
}
100% {
background-position: -0px -291px;
}
}
作者采用了“雪碧图”(将很多小图片放在一张大图中),通过移动position的x,y值来调整对应小图的位置
图片是由设计给出的,我们现在只需把图片连贯起来;也就上上面的代码移动大图背景坐标,展现小图