威尼斯888_www.wns888.com_威尼斯wns888官网
做最好的网站
威尼斯888 > 计算机网络 / Web前端 > Twitter的”fave”动画

原标题:Twitter的”fave”动画

浏览次数:195 时间:2019-10-08

Twitter的”fave”动画

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

本文由 伯乐在线 - 刘健超-J.c 翻译,胡屹 校稿。未经许可,禁止转发!
斯洛伐克(Slovak)语出处:cssanimation.rocks。招待参与翻译组。

Twitter的“fave” 动画

那二日 推特(TWTR.US)通过引进一段新的卡通重新设计了“fave”按键(也叫“fav”)。这段动画并不借助 CSS transition,而是由一雨后鞭笋图片组成的。上面呈现什么用 CSS 的 animation-timing-function 属性中的 steps 时序函数(timing function)重新制作这段动画。

运动发生的错觉

这段动画的成效类似于观察古老的西洋镜,该装置显示的是一多级三翻五次的环抱着圆筒的插图。在底下的演示中,大家不选取圆筒,而是在有个别成分内部突显一多元图片。

示例

把鼠标悬停在点滴上就能够看来动画效果(请到原文翻开动画效果——译者注)。

在本示例中,大家将从构建一多元能整合动画的图纸开头。在这里,大家运用来源 脸谱 的“fave”Logo动画的一部分图片集:

图片 1

为了能让这几个帧动起来,大家须要把它们放置在一排上。在这一个文件中,那几个帧已经排列在一排上了,这意味着大家能够透过安装背景地点(background-position)属性使背景从第一帧过渡到最终一帧。

图片 2

Steps() 时序函数

绝大多数的时序函数,比如 ease(缓冲)和 cubic-bezier(一次贝塞尔),都能让要素从开首状态平滑地对接到最后状态。steps 时序函数与此分化,它并非平整地连通,而是将连接进度分割为自然数量的步子,並且在这么些手续之间不慢地运动。

图片 3

小编们先创制如下的 HTML 代码:

XHTML

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

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

背景图片

接下去, 我们能够加多一些体制并设置背景图片地点:

图片 4

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

加了结束状态后,一旦鼠标悬停在该因素上,背景就能够从大家钦点的职位移动到这一雨后春笋图片中最后一张的岗位上(为了合作浏览器,注意要抬高相应的浏览器内核前缀——译者注)。

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帧组成的。

当我们将鼠标悬停在那么些成分上时,所阅览的机能是其背景图片通过五15个一样的步骤经历了一遍对接。

别的那个案例,也得以用 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 对这么些动画进行甘休、倒回以及精彩纷呈的调动。

“steps()”的其它用法

背景动画Smart(background sprites)仅仅只是 steps 时序函数的用法之一。除此而外该函数还适用于构建其余供给一文山会海离散步骤的卡通。比如,你能够用该函数制作二个摆钟。

备忘小条

假定您欣赏那篇小说,你能够将它分享在推特,可能封存上面包车型客车备忘小条,以便参考。

图片 5

打赏帮助笔者翻译越来越多好文章,感激!

打赏译者

打赏协理自个儿翻译越来越多好小说,多谢!

任选一种支付形式

图片 6 图片 7

赞 收藏 评论

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

图片 8

前端,在路上... 个人主页 · 我的篇章 · 19 ·     

图片 9

本文由威尼斯888发布于计算机网络 / Web前端,转载请注明出处:Twitter的&#8221;fave&#8221;动画

关键词:

上一篇:这里更深入分析一下跨域访问

下一篇:没有了