【深圳】DJI 大疆创新 互联网团队 前端及大量职位招聘中 (内推 15-50k + 丰厚年终 + 股份)简历请发至 evan.zhou@dji.com, 合适的话当天回复,当天内推。 更多福利

猫名字叫江湖

我们常在网站上看到类似的行走动画,看上去非常酷炫。
比如烧饼哥的 about me 页面
但类似的效果,前端的工作量很小。

首先你需要一张动画精灵图。
cat-sprite

没有? 去跟设计师要啊!!!
如果设计师没有帮你拼接精灵图的话,可以使用 Gulp Tool 或者在线 在线工具 帮你完成。

有了图片之后开始写代码吧,就两行~

1
2
3
4
5
6
7
8
9
10
11
12
13
#gato{
background: url('https://ohc0m0ub0.qnssl.com/903f9439c70b939db47b179ade6622211475736220133.svg');
height: 297px;
width: 507.5px;
margin-top: 2em;
margin: auto;
z-index: 10;
animation: spriteAnimation 1.2s steps(16,end) infinite;
}
@keyframes spriteAnimation {
from { background-position: 0 0; }
to { background-position: -8120px 0; }
}

搞定,是不是很简单

上面的不是gif图哟

你看实现原理就是逐帧显示,映射到我们脑海中自动成了连贯的动画。
之前翻译过一篇文章 《Twitter上的点赞动画》 实现方式是一样的,希望你看完这篇文章之后对类似的效果能够信手拈来。

如需转载,请注明出处: http://w3ctrain.com / 2016/10/06/walking-cat/

css