美文网首页
有人的地方就有【江湖】

有人的地方就有【江湖】

作者: 极乐君 | 来源:发表于2017-02-23 18:24 被阅读20次
猫名字叫江湖猫名字叫江湖

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

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

cat-spritecat-sprite

没有? 去跟设计师要啊!!!

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

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

#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; }
}

你看实现原理就是逐帧显示,映射到我们脑海中自动成了连贯的动画。

之前翻译过一篇文章 《Twitter上的点赞动画》 实现方式是一样的,希望你看完这篇文章之后对类似的效果能够信手拈来。

来源:http://w3ctrain.com/2016/10/06/walking-cat/

相关文章

  • 人在江湖飘

    俗话说,“有人的地方就有江湖,有江湖的地方就有恩怨” 换句话说“有人的地方就有江湖,有江湖的地方就有「博弈」” 博...

  • 这个世界从来不曾公平过,未来也肯定不会

    有人的地方就有江湖,有江湖的地方就有不公 —...

  • 2019-05-22

    有人的地方就有江湖 有江湖的地方就有离别

  • 浮生未歇

    有人在的地方就有江湖 有江湖的地方就有地方 有地方的地方就有人群 周而复始 有人群的地方就有了烟火 有烟火的地方就...

  • 江湖,有人的地方就有江湖

    金庸说,江湖是「 飞雪连天射白鹿,笑书神侠倚碧鸳。」 古龙却说,江湖是「 天涯 · 明月 · 刀,流星 · 蝴蝶 ...

  • “职业维权人”不顾江湖道义,联手“赌徒”滋生币圈维权庞大利益链?

    《卧虎藏龙》中的李慕白说过“有人的地方就有江湖”。 是的,有人的地方就有江湖,有江湖的地方就有利益纷争、就有刀光剑...

  • 有人的地方就有江湖

    一直觉得,做人,本本分分、不争不抢,就好。 近来发生的一系列事情,突然觉得,江湖险恶,人心难测。 有人被抓了,本以...

  • 有人的地方就有江湖

    江湖,这个词很武侠,首先想到的是金庸的武侠小说,有侠客的地方就叫江湖,小时候经常看武侠片,对那些惩恶扬善的英雄非常...

  • 有人的地方就有江湖

    昨天值班值一天,感觉到现在,就是要把大家,所有人都耗在一起,大家意见都很大,我们都只是为了配合别人完成任务而忙的要...

  • 有人的地方就有江湖

    文 / 仁青 从来就没有至清的湖水,从来就没有真正的净土,从来就没有真正毫无纷争的公司。 入职不到半年,敏佳渐渐感...

网友评论

      本文标题:有人的地方就有【江湖】

      本文链接:https://www.haomeiwen.com/subject/jaibwttx.html