www.qjdy.com-奇迹赌场 > 佳美特设计 > Twitter的”fave”动画

原标题:Twitter的”fave”动画

浏览次数:184 时间:2019-09-22

Twitter的”fave”动画

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

本文由 伯乐在线 - 刘健超-J.c 翻译,胡屹 校稿。未经许可,禁止转发!
丹麦语出处:cssanimation.rocks。应接加入翻译组。

Twitter的“fave” 动画

多年来 推文(Tweet)通过引进一段新的卡通片重新设计了“fave”按键(也叫“fav”)。这段动画并不依赖CSS transition,而是由一层层图片组成的。下边突显什么用 CSS 的 animation-timing-function 属性中的 steps 时序函数(timing function)重新制作这段动画。

挪动发生的错觉

这段动画的效应类似于旁观古老的西洋镜,该装置呈现的是一名目好些个三回九转的环绕着圆筒的插画。在底下的身体力行中,大家不选取圆筒,而是在某些成分内部展现一文山会海图片。

示例

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

在本示例中,咱们将从制作一文山会海能整合动画的图样初阶。在这里,大家采用来源 Twitter 的“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帧组成的。

当大家将鼠标悬停在那么些因素上时,所看到的效果是其背景图片通过52个同样的步子经历了一遍对接。

别的这一个案例,也能够用 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

本文由www.qjdy.com-奇迹赌场发布于佳美特设计,转载请注明出处:Twitter的&#8221;fave&#8221;动画

关键词: mg电子游戏 HTML5

上一篇:在Email中防御性地使用HTML5和CSS3的指南

下一篇:没有了