十天精通CSS3
分类:前端操作

Twitter的”fave”动画

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

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

变形--旋转 rotate()

旋转rotate()函数通过点名的角度参数使成分相对原点实行旋转。它根本在二维空间内张开操作,设置三个角度值,用来钦赐旋转的上升的幅度。假若那个值为正值,成分相对原点宗旨顺时针旋转;假若那个值为负值,成分相对原点中央逆时针旋转。如下图所示:

图片 1

HTML代码:

<div class="wrapper">
  <div></div>
</div>

CSS代码:

.wrapper {
  width: 200px;
  height: 200px;
  border: 1px dotted red;
  margin: 100px auto;
}
.wrapper div {
  width: 200px;
  height: 200px;
  background: orange;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

示范结果

图片 2

 

Twitter的“fave” 动画

多年来 Twitter通过引进豆蔻梢头段新的动漫重新设计了“fave”按键(也叫“fav”卡塔尔。这段动漫并不依附CSS transition,而是由大器晚成多重图片组成的。上边展现怎么着用 CSS 的 animation-timing-function 属性中的 steps 时序函数(timing function卡塔 尔(阿拉伯语:قطر‎重新制作这段动漫。

变形--扭曲 skew()

扭曲skew()函数能够让要素偏斜彰显。它能够将二个对象以个中心地点围绕着X轴Y轴根据一定的角度倾斜。那与rotate()函数的转动分化,rotate()函数只是旋转,而不会转移成分的形制。skew()函数不会旋转,而只会变动成分的造型。

Skew()具备三种情景:

1、skew(x,y)使成分在档次和垂直方向同期扭曲(X轴和Y轴同期按一定的角度值进行翻转换形卡塔尔国;

图片 3

先是个参数对应X轴,第叁个参数对应Y轴。即便第贰个参数未提供,则值为0,也正是Y轴方向上无斜切。

2、skewX(x)仅使成分在档次方向扭曲变形(X轴扭曲变形卡塔 尔(英语:State of Qatar);

图片 4

3、skewY(y)仅使成分在笔直方向扭曲变形(Y轴扭曲变形卡塔尔国

图片 5

亲自去做演示:

通过skew(卡塔 尔(英语:State of Qatar)函数将长方形产生平行四边形。

HTML代码:

<div class="wrapper">
  <div>我变成平形四边形</div>
</div>

CSS代码:

.wrapper {
  width: 300px;
  height: 100px;
  border: 2px dotted red;
  margin: 30px auto;
}
.wrapper div {
  width: 300px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  color: #fff;
  background: orange;
  -webkit-transform: skew(45deg);
  -moz-transform:skew(45deg) 
  transform:skew(45deg);
}

示范结果

图片 6

活动发生的错觉

这段动漫的效能雷同于观察古老的西洋镜,该装置显示的是风流罗曼蒂克层层一而再三翻五次的环绕着圆筒的插画。在上面包车型大巴示范中,我们不采纳圆筒,而是在有些成分内部显示风华正茂俯拾都已图片。

变形--缩放 scale()

缩放 scale()函数 让要素根据大旨原点对目的实行缩放。

缩放 scale 具备二种意况:

1、 scale(X,Y)使成分水平方向和垂直方向同期缩放(约等于X轴和Y轴同期缩放卡塔 尔(英语:State of Qatar)

图片 7

例如:

div:hover {
  -webkit-transform: scale(1.5,0.5);
  -moz-transform:scale(1.5,0.5)
  transform: scale(1.5,0.5);
}

在意:Y是贰个可选参数,若无设置Y值,则象征X,Y多少个样子的缩放倍数是雷同的。

2、scaleX(x)成分仅水平方向缩放(X轴缩放)

图片 8

3、scaleY(y)成分仅垂直方向缩放(Y轴缩放)

图片 9

HTML代码:

<div class="wrapper">
  <div>我将放大1.5倍</div>
</div>

CSS代码:

.wrapper {
  width: 200px;
  height: 200px;
  border:2px dashed red;
  margin: 100px auto;
}
.wrapper div {
  width: 200px;
  height: 200px;
  line-height: 200px;
  background: orange;
  text-align: center;
  color: #fff;
}
.wrapper div:hover {
  opacity: .5;
  -webkit-transform: scale(1.5);
  -moz-transform:scale(1.5)
  transform: scale(1.5);
}

身体力行结果

图片 10

注意: scale()的取值私下认可的值为1,当班值日设置为0.010.99时期的其他值,作用使三个要素缩短;而别的大于或等于1.01的值,功效是让要素放大。

示例

把鼠标悬停在点滴上就足以看出动漫效果(请到原文翻开动漫效果——译者注卡塔 尔(英语:State of Qatar)。

在本示例中,大家将从制作一文山会海能整合动漫的图纸初阶。在此,大家采纳来源 Twitter 的“fave”Logo动画的部分图片集:

图片 11

为了能让这么些帧动起来,大家供给把它们放置在一排上。在此个文件中,那个帧已经排列在一排上了,那意味大家得以透过安装背景地方(background-position卡塔 尔(英语:State of Qatar)属性使背景从第意气风发帧过渡到最后后生可畏帧。

图片 12

变形--位移 translate()

translate()函数能够将成分向钦点的动向移动,相近于position中的relative。或以简单的明白为,使用translate()函数,能够把元素从原先的岗位移动,而不影响在X、Y轴上的别样Web组件。

translate大家分为二种状态:

1、translate(x,y)水平方向和垂直方向同有时候活动(相当于X轴和Y轴同一时间活动卡塔 尔(阿拉伯语:قطر‎

图片 13

2、translateX(x)仅水平方向移动(X轴移动)

图片 14

3、translateY(Y)仅垂直方向移动(Y轴移动)

图片 15

实例演示:透过translate()函数将成分向Y轴下方移动50px,X轴右方移动100px。

HTML代码:

<div class="wrapper">
  <div>我向右向下移动</div>
</div>

CSS代码:

.wrapper {
  width: 200px;
  height: 200px;
  border: 2px dotted red;
  margin: 20px auto;
}
.wrapper div {
  width: 200px;
  height: 200px;
  line-height: 200px;
  text-align: center;
  background: orange;
  color: #fff;
  -webkit-transform: translate(50px,100px);
  -moz-transform:translate(50px,100px);
  transform: translate(50px,100px);
}

亲自过问结果

图片 16

Steps() 时序函数

大多数的时序函数,比如 ease(缓冲卡塔 尔(阿拉伯语:قطر‎和 cubic-bezier(一遍贝塞尔卡塔 尔(阿拉伯语:قطر‎,都能让要素从上马状态平滑地连接到结尾状态。steps 时序函数与此差异,它并不是平整地对接,而是将衔接进度分割为自然数量的步子,何况在这里些手续之间相当的慢地移动。

图片 17

笔者们先创立如下的 HTML 代码:

XHTML

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

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

变形--矩阵 matrix()

matrix() 是八个含八个值的(a,b,c,d,e,f)调换矩阵,用来内定七个2D调换,也正是直接接收八个[a b c d e f]转移矩阵。正是依附水平方向(X轴卡塔尔和垂直方向(Y轴卡塔尔国重新定位成分,此属性值使用涉及到数学中的矩阵,小编在这里处只是简短的说一下CSS3中的transform有这么五个属性值,固然需求深刻摸底,需求对数学矩阵有肯定的学问。

以身作则演示:透过matrix()函数来模拟transform中translate()位移的效劳。
HTML代码:

<div class="wrapper">
  <div></div>
</div>

CSS代码:

.wrapper {
  width: 300px;
  height: 200px;
  border: 2px dotted red;
  margin: 40px auto;
}
.wrapper div {
  width:300px;
  height: 200px;
  background: orange;
  -webkit-transform: matrix(1,0,0,1,50,50);
  -moz-transform:matrix(1,0,0,1,50,50);
  transform: matrix(1,0,0,1,50,50);
}

身体力行结果:

图片 18

背景图片

接下去, 大家能够增添一些体制并设置背景图片地点:

图片 19

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

请小心第2个法规 animation。在本例中,大家选拔 steps 时序函数,让background-position 属性涉世了八个持续时间为1秒的连接。在 steps 部分的“55”这些值,代表了这段动漫是由55帧组成的。

当大家将鼠标悬停在这里个成分上时,所见到的效用是其背景图片通过51个雷同的手续涉世了叁遍对接。

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

变形--原点 transform-origin

其余四个要素都有一个骨干点,私下认可情形之下,此中央点是处在元素X轴和Y轴的五成处。如下图所示:

图片 20

在未曾重新初始化transform-origin改换成分原点地方的意况下,CSS变形进行的团团转、位移、缩放,扭曲等操作都是以成分和谐大旨地方举办变形。但不菲时候,我们能够通过transform-origin来对成分实行原点位置变动,使成分原点不在成分的主题地点,以实现须求的原点地点。

transform-origin取值和因素设置背景中的background-position取值相通,如下表所示:

图片 21

躬行实践展示:

因此transform-origin改造元素原点到左上角,然后进行顺时旋转45度。

HTML代码:

<div class="wrapper">
  <div>原点在默认位置处</div>
</div>
<div class="wrapper transform-origin">
  <div>原点重置到左上角</div>
</div>

CSS代码:

.wrapper {
  width: 300px;
  height: 300px;
  float: left;
  margin: 100px;
  border: 2px dotted red;
  line-height: 300px;
  text-align: center;
}
.wrapper div {
  background: orange;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.transform-origin div {
  -webkit-transform-origin: left top;
  transform-origin: left top;
}

亲自过问结果:

图片 22

何以不选拔gif?

虽说也得以行使 gif 动漫,但在这里个案例中并非很有分寸。gif 文件的大大小小日常超大还要帧速率也麻烦决定。而使用这些法子,我们就足以用 CSS 对那些动漫举办甘休、倒回以至多姿多彩的调动。

卡通--过渡性质 transition-property

中期在Web中要达成动漫效果,都是依赖于JavaScript或Flash来成功。但在CSS3中新扩充了三个新的模块transition,它能够经过一些简洁明了的CSS事件来触发成分的外观变化,让效果显得愈发细致。轻易题说,固然通过鼠标的单击、获得核心,被点击或对成分任何变动中触发,并平滑地以动漫效果改换CSS的属性值。

在CSS中创建简单的过渡效果可以从以下几个步骤来实现:
第一,在默认样式中声明元素的初始状态样式;
第二,声明过渡元素最终状态样式,比如悬浮状态;
第三,在默认样式中通过添加过渡函数,添加一些不同的样式。

CSS3的过分transition属性是二个复合属性,首要总结以下多少个子属性:

  • transition-property:钦命过渡或动态模拟的CSS属性

  • transition-duration:钦点完成交接所需的小时

  • transition-timing-function:内定过渡函数

  • transition-delay:钦赐早先产出的延迟时间

先来看transition-property属性

transition-property用来钦定连接动漫的CSS属性名称,而以此过渡性质唯有具备二个中式茶食值的品质(供给发出动漫的属性卡塔 尔(阿拉伯语:قطر‎技能抱有过渡效果,其对应享有过渡的CSS属性首要有:

图片 23

HTML:

<div></div>

CSS:

div {
  width: 200px;
  height: 200px;
  background-color:red;
  margin: 20px auto;
  -webkit-transition: background-color .5s ease .1s;
  transition: background-color .5s ease .1s;
}
div:hover {
  background-color: orange;
}

演示结果:

鼠标移入

图片 24

鼠标移出

图片 25

非常注意:当“transition-property”属性设置为all时,表示的是负有中式茶食值的性质。

用二个大概的例证来表明那一个难点:

就算你的发端状态设置了体制“width”,“height”,“background”,当您在终始状态都改成了那多特个性,那么all表示的正是“width”、“height”和“background”。要是您的终始状态只变动了“width”和“height”时,那么all代表的就是“width”和“height”。

“steps()”的其余用法

背景动漫Smart(background sprites卡塔尔仅仅只是 steps 时序函数的用法之生机勃勃。除却该函数还适用于营造其余要求一绚丽多彩离散步骤的卡通。举个例子,你可以用该函数制作三个摆钟。

动漫片--过渡所需时日 transition-duration

transition-duration属性首要用来设置一个个性过渡到另一个脾气所需的年月,也等于从旧属性过渡到新属性开销的岁月长度,俗称持续时间

案例演示:

在鼠标悬停(hover卡塔尔状态下,让容器从直竞争渐过渡到圆角,并让任何动漫持续0.5s。

HTML:

<div></div>

CSS:

div {
  width: 300px;
  height: 200px;
  background-color: orange;
  margin: 20px auto;
  -webkit-transition-property: -webkit-border-radius;
  transition-property: border-radius;
  -webkit-transition-duration: .5s;
  transition-duration: .5s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  -webkit-transition-delay: .2s;
  transition-delay: .2s;
}
div:hover {
  border-radius: 20px;
}

演示结果:

鼠标移入

图片 26

鼠标移出

图片 27

备忘小条

假设你喜欢这篇文章,你能够将它分享在照片墙,或许封存下边包车型地铁备忘小条,以便参照他事他说加以考察。

图片 28

打赏匡助笔者翻译更加的多好随笔,感谢!

打赏译者

动画片--过渡函数 transition-timing-function

transition-timing-function属性指的是连着的“缓动函数”。重要用来内定浏览器的对接速度,以致连接时期的操作举市价况,个中要包蕴以下三种函数:

图片 29

(单击图片可推广)

案例展现:

在hover状态下,让容器从一个圆柱形慢慢过渡到三个圆形,而整个过渡是先加快再减速,也等于运用ease-in-out函数。

HTML代码:

<div></div>

CSS代码:

div {
  width: 200px;
  height: 200px;
  background: red;
  margin: 20px auto;
  -webkit-transition-property: -webkit-border-radius;
  transition-property: border-radius;
  -webkit-transition-duration: .5s;
  transition-duration: .5s;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  -webkit-transition-delay: .2s;
  transition-delay: .2s;
}
div:hover {
  border-radius: 100%;
}

亲自去做结果

鼠标移入:

图片 30

鼠标移出:

图片 31

打赏扶持俺翻译越多好文章,多谢!

任选黄金时代种支付办法

图片 32 图片 33

赞 收藏 评论

动漫--过渡延迟时间 transition-delay

transition-delay属性transition-duration属性十二万分相符,区别的是transition-duration是用来安装过渡动漫的持续时间,而transition-delay首要用于钦点三个动漫片开端执行的年华,也正是说当改变成分属性值后多久初阶进行。

有时大家想改进三个只怕七个css属性的transition效果时,只要把多少个transition的宣示串在一同,用逗号(“,”卡塔 尔(阿拉伯语:قطر‎隔绝,然后分别能够有各自不相同的继续时间和其日子的速率调换格局。但供给值得注意的一点:第2个日子的值为 transition-duration,第叁个为transition-delay。

例如:a{ transition: background 0.8s ease-in 0.3,color 0.6s ease-out 0.3;}

演示演示:

透过transition属性将一个200px *200px的海军蓝容器,在鼠标悬浮状态时,过渡到二个300px * 300px的深蓝紫容器。并且整个过渡0.1s后触发,並且整个过渡持续0.28s。

HTML代码:

<div class="wrapper">
  <div>鼠标放到我的身上来</div>
</div>

CSS代码:

.wrapper {
  width: 400px;
  height: 400px;
  margin: 20px auto;
  border: 2px dotted red;
}
.wrapper div {
  width: 200px;
  height: 200px;
  background-color: orange;
  -webkit-transition: all .28s ease-in .1s;
  transition: all .28s ease-in .1s;
}
.wrapper div:hover {
  width: 300px;
  height: 300px;
  background-color: red;
}

演示结果

鼠标移入:

图片 34

鼠标移出:

图片 35

有关我:刘健超-J.c

图片 36

前端,在路上... 个人主页 · 作者的文章 · 19 ·     

图片 37

本文由正版必中一肖图发布于前端操作,转载请注明出处:十天精通CSS3

上一篇:Web质量优化 下一篇:没有了
猜你喜欢
热门排行
精彩图文