金沙澳门官网网址:来自前端的小段子

作者: 前端知识  发布:2019-09-26

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

2017/08/15 · CSS · 段子

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

金沙澳门官网网址 1

打赏扶助本人翻译越来越多好小说,感激!

任选一种支付方式

金沙澳门官网网址 2 金沙澳门官网网址 3

赞 收藏 评论

CSS双关语

普普通通来讲,笔者写的关于Web开辟的小说都以盛大的。因为根本涉嫌到征服挑衅,也许是教学之类的内容。可是,明天是周五了,经过了辛勤的一周,作者说了算止息一下,发一些和现在不等的娱乐点的CSS的双关语开心一下。希望您和自家同样喜欢这一个双关语!

金沙澳门官网网址 4

翻译注:奥利弗·Quinn(Oliver Queen)是绿箭侠。

金沙澳门官网网址 5

译者注:汽车人,变身!

金沙澳门官网网址 6

翻译注:一九八六,德国首都未有墙了!

金沙澳门官网网址 7

翻译注:大爆炸在此以前,世界空无一片。

金沙澳门官网网址 8

翻译注:查克·诺Rees,狠剧中人物啊!(#BadA55=>bad ass)。

金沙澳门官网网址 9

翻译注:捉弄众院的各位领导,沾沾自喜,执迷不悟,不在大众的视界里。

金沙澳门官网网址 10

翻译注:光明会的各位铁汉硬汉平日都非常的低调。

金沙澳门官网网址 11

翻译注:带上近视镜,文字图片都看得清啦!

金沙澳门官网网址 12

翻译注:未有近视镜,视界都变模糊了T_T。

金沙澳门官网网址 13

翻译注:鬼魂是带透明效果的反革命!

金沙澳门官网网址 14

金沙澳门官网网址 ,翻译注:最惧怕的正是看不见的未知物。

金沙澳门官网网址 15

翻译注:1951年的德罗宁。《未到回来》里大学生改变了一辆时光车,穿越了。

金沙澳门官网网址 16

翻译注:每四年二次换届的政坛。

金沙澳门官网网址 17

翻译注:霍比特人,身子是小人物的二分之一,脚是小人物的两倍。

金沙澳门官网网址 18

翻译注:Bruce班纳,产生受人敬重的人以后正是绿的。

金沙澳门官网网址 19

翻译注:泰坦Nick号,沉默于水下的有趣的事;冰山,固定在海上的意外之灾。

金沙澳门官网网址 20

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

金沙澳门官网网址 21

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

金沙澳门官网网址 22

翻译注:肌肉,都是安枕无忧的[允悲]。

金沙澳门官网网址 23

翻译注:Samsung,苹果的继承者。

金沙澳门官网网址 24

翻译注:忍者,黑衣,隐形,飞檐走壁。

金沙澳门官网网址 25

翻译注:推高式奶罩,统统往上,肉肉都挤出来了哟。

金沙澳门官网网址 26

翻译注:乡村音乐歌星,字间距为零!

金沙澳门官网网址 27

翻译注:有钱人总是塔尖的1%,剩下的99%都以Taki的辛勤大众。

金沙澳门官网网址 28

翻译注:狙击格局,十字线开启!

金沙澳门官网网址 29

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

金沙澳门官网网址 30

翻译注:内人民代表大会人,总是百分之百科学的!

金沙澳门官网网址 31

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

金沙澳门官网网址 32

译者注:周期,表。

Ethan Jarrell | Professional Profile | LinkedIn

2 赞 1 收藏 评论

金沙澳门官网网址 33

Twitter的”fave”动画

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

本文由 伯乐在线 - 刘健超-J.c 翻译,胡屹 校稿。未经许可,禁止转发!
波兰语出处:cssanimation.rocks。款待到场翻译组。

备忘小条

要是你欢欣那篇小说,你能够将它分享在Twitter,只怕封存下边包车型客车备忘小条,以便参照他事他说加以考察。

金沙澳门官网网址 34

打赏帮忙小编翻译越多好小说,谢谢!

打赏译者

Steps() 时序函数

大繁多的时序函数,例如 ease(缓冲)和 cubic-bezier(一次贝塞尔),都能让要素从上马状态平滑地连通到结尾状态。steps 时序函数与此不一致,它并非平缓地连接,而是将衔接进度分割为自然数量的步子,并且在那个步骤之间异常快地移动。

金沙澳门官网网址 35

大家先创立如下的 HTML 代码:

XHTML

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

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

背景图片

接下去, 我们可以加上一些样式并设置背景图片地方:

金沙澳门官网网址 36

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

当我们将鼠标悬停在那么些成分上时,所观望的效果与利益是其背景图片通过53个一样的步调经历了二回对接。

其余这一个案例,也得以用 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);
}

Twitter的“fave” 动画

近些日子 推特(TWTR.US)通过引进一段新的卡通重新设计了“fave”开关(也叫“fav”)。这段动画并不借助 CSS transition,而是由一多种图片组成的。上边显示什么用 CSS 的 animation-timing-function 属性中的 steps 时序函数(timing function)重新制作这段动画。

本文由金沙澳门官网发布于前端知识,转载请注明出处:金沙澳门官网网址:来自前端的小段子

关键词: 金沙澳门官网

上一篇:X的裂口和CSS,中部分相关
下一篇:没有了