脸谱的”fave”动画

脸谱的”fave”动画

Twitter的”fave”动画

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

本文由 伯乐在线 –
刘健超-J.c
翻译,澳门新萄京8522,胡屹
校稿。未经许可,幸免转发!
拉脱维亚语出处:cssanimation.rocks。应接插手翻译组。

变形–旋转 rotate()

旋转rotate()函数因此点名的角度参数使元素绝对原点进行旋转。它根本在二维空间内开展操作,设置二个角度值,用来钦命旋转的宽度。假如这几个值为正值,元素相对原点核心顺时针旋转;假使这么些值为负值,成分相对原点中央逆时针旋转。如下图所示:

澳门新萄京8522 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);
}

示范结果

澳门新萄京8522 2

 

本课程分为以下三步:

Twitter的“fave” 动画

前段时间 推特通过引入风流罗曼蒂克段新的卡通重新设计了“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轴同有时候按自然的角度值进行翻调换形);

澳门新萄京8522 3

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

2、skewX(x)仅使成分在档次方向扭曲变形(X轴扭曲变形);

澳门新萄京8522 4

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

澳门新萄京8522 5

示范演示:

透过skew()函数将星型形成平行四边形。

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

亲自去做结果

澳门新萄京8522 6

Step1 – Photoshop

运动发生的错觉

这段动画的效果类似于观察古老的西洋镜,该装置显示的是一花样好多延续的缠绕着圆筒的插画。在下边包车型大巴言传身教中,我们不选取圆筒,而是在某些成分内部展现风流罗曼蒂克层层图片。

变形–缩放 scale()

缩放 scale()函数 让要素依照中央原点对指标开展缩放。

缩放 scale 具备三种境况:

1、 scale(X,Y)使成分水平方向和垂直方向同期缩放(相当于X轴和Y轴同有的时候间缩放)

澳门新萄京8522 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轴缩放)

澳门新萄京8522 8

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

澳门新萄京8522 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);
}

示范结果

澳门新萄京8522 10

注意: scale()的取值私下认可的值为1,当班值日设置为0.010.99期间的任何值,功用使一个因素减弱;而其他大于或等于1.01的值,作用是让要素放大。

Step2 – HTML/CSS

示例

把鼠标悬停在个别上就能够见见动画效果(请到原文查阅动画效果——译者注)。

在本示例中,我们将从构建如日方升层层能组成动画的图形起始。在那处,大家采用来源
Twitter 的“fave”Logo动画的一些图片集:

澳门新萄京8522 11

为了能让那一个帧动起来,大家要求把它们放置在一排上。在此个文件中,这几个帧已经排列在一排上了,那意味着大家得以经过设置背景地方(background-position)属性使背景从第意气风发帧过渡到终极意气风发帧。

澳门新萄京8522 12

变形–位移 translate()

translate()函数能够将成分向钦命的矛头移动,类似于position中的relative。或以简单的知道为,使用translate()函数,能够把成分从原先的地点移动,而不影响在X、Y轴上的此外Web组件。

translate大家分为两种意况:

1、translate(x,y)水平方向和垂直方向同不经常间活动(也正是X轴和Y轴同一时候活动)

澳门新萄京8522 13

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

澳门新萄京8522 14

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

澳门新萄京8522 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);
}

演示结果

澳门新萄京8522 16

Step3 – JavaScript(jQuery)

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图