Facebook的”fave”动漫

示例

把鼠标悬停在有限上就足以见见动漫效果(请到原文查阅动漫效果——译者注卡塔尔国。

在本示例中,大家将从制作后生可畏层层能构成动漫的图样开头。在那间,大家利用来源
Facebook 的“fave”Logo动画的局地图片集:

金沙9159 1

为了能让那一个帧动起来,咱们须要把它们放置在一排上。在此个文件中,那几个帧已经排列在一排上了,那象征大家能够通过安装背景地方(background-position卡塔 尔(阿拉伯语:قطر‎属性使背景从第风流浪漫帧过渡到结尾大器晚成帧。

金沙9159 2

关于小编:刘健超-J.c

金沙9159 3

前端,在路上…
个人主页 ·
笔者的篇章 ·
19 ·
    

金沙9159 4

备忘小条

设若你欢娱那篇随笔,你能够将它分享在Instagram,恐怕封存上边包车型地铁备忘小条,以便参谋。

金沙9159 5

打赏帮助自身翻译越来越多好作品,谢谢!

打赏译者

背景图片

接下去, 大家能够增加一些体制并安装背景图片地方:

金沙9159 6

CSS

.fave { width: 70px; height: 50px; background:
url(images/twitter_fave.png) no-repeat; background-position: 0 0; }

1
2
3
4
5
6
.fave {
  width: 70px;
  height: 50px;
  background: url(images/twitter_fave.png) no-repeat;
  background-position: 0 0;
}

加了甘休状态后,生机勃勃旦鼠标悬停在该因素上,背景就能够从我们钦定之处移动到那朝气蓬勃雨后鞭笋图片中最终一张的岗位上(为了合作浏览器,注意要抬高相应的浏览器内核前缀——译者注卡塔 尔(英语:State of Qatar)。

CSS

.fave:hover{ animation: fave 1s steps(55); } @keyframes fave{ 0%{
background-position:0 0; } 100%{ background-position:-3519px 0; } }

1
2
3
4
5
6
7
8
9
10
11
.fave:hover{
  animation: fave 1s steps(55);
}
@keyframes fave{
  0%{
    background-position:0 0;
  }
  100%{
    background-position:-3519px 0;
  }
}

请留意第四个法规 animation。在本例中,我们运用 steps
时序函数,让background-position 属性阅历了三个持续时间为1秒的连通。在
steps 部分的“55”这么些值,代表了这段动画是由55帧组成的。

当大家将鼠标悬停在这里个因素上时,所见到的效率是其背景图片通过五14个同样的步骤经验了贰回对接。

除此以外那么些案例,也足以用 transition 实现:

CSS

.fave:hover { background-position: -3519px 0; transition: background 1s
steps(55); }

1
2
3
4
.fave:hover {
  background-position: -3519px 0;
  transition: background 1s steps(55);
}

干什么不应用gif?

虽说也足以动用 gif 动漫,但在这里个案例中而不是很适用。gif
文件的大大小小日常很大况兼帧速率也难以决定。而使用这几个法子,大家就足以用 CSS
对这么些动漫进行甘休、倒回以至精彩纷呈的调动。

Twitter的”fave”动画

2015/05/12 · HTML5 ·
Twitter,
动画

本文由 伯乐在线 –
刘健超-J.c
翻译,胡屹
校稿。未经许可,禁绝转发!
立陶宛共和国(Republic of Lithuania卡塔 尔(阿拉伯语:قطر‎语出处:cssanimation.rocks。应接到场翻译组。

Steps() 时序函数

大多数的时序函数,比方 ease(缓冲卡塔 尔(英语:State of Qatar)和
cubic-bezier(一遍贝塞尔卡塔 尔(英语:State of Qatar),都能让要素从上马状态平滑地联网到最后状态。steps
时序函数与此不相同,它并非无边无际地接通,而是将衔接进程分割为自然数量的步骤,况且在这里些手续之间极快地移动。

金沙9159 7

大家先制造如下的 HTML 代码:

XHTML

<section class=”fave”></section>

1
<section class="fave"></section>

“steps()”的别样用法

背景动漫精灵(background sprites卡塔 尔(英语:State of Qatar)仅仅只是 steps
时序函数的用法之风姿洒脱。除却该函数还适用于打造别的需求一文山会海离散步骤的动漫。比如,你能够用该函数制作三个摆钟。

活动产生的错觉

这段动漫的意义相近于观望古老的西洋镜,该装置显示的是意气风发多种一连的环抱着圆筒的插画。在底下的演示中,大家不接受圆筒,而是在有些成分内部显示一多种图片。

金沙9159,打赏辅助自个儿翻译越来越多好文章,多谢!

任选后生可畏种支付形式

金沙9159 8
金沙9159 9

赞 收藏
评论

Twitter的“fave” 动画

近年来 Facebook通过引进黄金时代段新的卡通片重新规划了“fave”按键(也叫“fav”卡塔尔。这段动漫并不依赖CSS transition,而是由一形形色色图片组成的。上边展现什么用 CSS 的
animation-timing-function 属性中的 steps 时序函数(timing
function卡塔 尔(阿拉伯语:قطر‎重新创制这段动漫。

发表评论

电子邮件地址不会被公开。 必填项已用*标注