俄罗斯贵宾会-俄罗斯贵宾会官网
做最好的网站

CSS双关语–来自前端的小段子,你看得懂吗?

CSS双关语–来自前端的小段子,你看得懂吗?

2017/08/15 · CSS · 段子

原文出处: Ethan Jarrell   译文出处:众成翻译   

图片 1

Twitter的”fave”动画

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

本文由 伯乐在线 - 刘健超-J.c 翻译,胡屹 校稿。未经许可,禁止转载!
英文出处:cssanimation.rocks。欢迎加入翻译组

CSS双关语

通常来说,我写的有关Web开发的文章都是严肃的。因为主要涉及到克服挑战,或者是教学之类的内容。不过,今天是周五了,经过了劳累的一周,我决定休息一下,发一些和以往不同的娱乐点的CSS的双关语开心一下。希望你和我一样喜欢这些双关语!

图片 2

译者注:奥利弗·奎因(Oliver Queen)是绿箭侠。

图片 3

译者注:汽车人,变身!

图片 4

译者注:1989,柏林没有墙了!

图片 5

译者注:大爆炸之前,世界空无一片。

图片 6

译者注:查克·诺里斯,狠角色啊!(#BadA55=>bad ass)。

图片 7

译者注:吐槽众议院的诸位领导,自以为是,顽固不化,不在大众的视线里。

图片 8

译者注:光明会的各位英雄好汉通常都很低调。

图片 9

译者注:带上眼镜,文字图片都看得清啦!

图片 10

译者注:没有眼镜,视野都变模糊了T_T。

图片 11

译者注:鬼魂是带透明效果的白色!

图片 12

译者注:最恐怖的就是看不见的未知物。

图片 13

译者注:1955年的德罗宁。《未到回来》里博士改造了一辆时光车,穿越了。

图片 14

译者注:每四年一次换届的政府。

图片 15

译者注:霍比特人,身子是普通人的一半,脚是普通人的两倍。

图片 16

译者注:布鲁斯班纳,变成巨人以后就是绿的。

图片 17

译者注:泰坦尼克号,沉默于水下的传说;冰山,固定在海上的灾祸。

图片 18

译者注:金·卡戴珊,屁股上垫的太多了…

图片 19

译者注:美国和墨西哥,边境线…是虚的?:P

图片 20

译者注:肌肉,都是松弛的[允悲]。

图片 21

译者注:三星,苹果的继承者。

图片 22

译者注:忍者,黑衣,隐形,快如闪电。

图片 23

译者注:推高式胸罩,统统往上,肉肉都挤出来了啊。

图片 24

译者注:说唱歌手,字间距为零!

图片 25

译者注:有钱人总是塔尖的1%,剩下的99%都是塔基的劳苦大众。

图片 26

译者注:狙击模式,十字线开启!

图片 27

译者注:百慕大三角,进去的你都看不见了。

图片 28

译者注:老婆大人,总是百分百正确的!

图片 29

译者注:比萨斜塔,斜体效果。

图片 30

译者注:周期,表。

Ethan Jarrell | Professional Profile | LinkedIn

2 赞 1 收藏 评论

图片 31

Twitter的“fave” 动画

最近 Twitter 通过引入一段新的动画重新设计了“fave”按钮(也叫“fav”)。这段动画并不依赖 CSS transition,而是由一系列图片组成的。下面展示如何用 CSS 的 animation-timing-function 属性中的 steps 时序函数(timing function)重新制作这段动画。

运动产生的错觉

这段动画的效果类似于观看古老的西洋镜,该装置呈现的是一系列连续的围绕着圆筒的插画。在下面的示例中,我们不使用圆筒,而是在某个元素内部呈现一系列图片。

示例

把鼠标悬停在星星上就可以看到动画效果(请到原文查看动画效果——译者注)。

在本示例中,我们将从制作一系列能组成动画的图片开始。在这里,我们使用来自 Twitter 的“fave”图标动画的部分图片集:

图片 32

为了能让这些帧动起来,我们需要把它们放置在一排上。在这个文件中,这些帧已经排列在一排上了,这意味着我们可以通过设置背景位置(background-position)属性使背景从第一帧过渡到最后一帧。

图片 33

Steps() 时序函数

大多数的时序函数,例如 ease(缓冲)和 cubic-bezier(三次贝塞尔),都能让元素从初始状态平滑地过渡到最终状态。steps 时序函数与此不同,它并不是平滑地过渡,而是将过渡过程分割为一定数量的步骤,并且在这些步骤之间快速地移动。

图片 34

我们先建立如下的 HTML 代码:

XHTML

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

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

背景图片

接下来, 我们可以添加一些样式并设置背景图片位置:

图片 35

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

请注意第1个规则 animation。在本例中,我们利用 steps 时序函数,让background-position 属性经历了一个持续时间为1秒的过渡。在 steps 部分的“55”这个值,代表了这段动画是由55帧组成的。

当我们将鼠标悬停在这个元素上时,所看到的效果是其背景图片通过55个相同的步骤经历了一次过渡。

另外这个案例,也可以用 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);
}

本文由俄罗斯贵宾会发布于Web前端,转载请注明出处:CSS双关语&#8211;来自前端的小段子,你看得懂吗?

您可能还会对下面的文章感兴趣: