设置一个角度值,本教程分为以下三步

时间:2019-09-30 15:37来源:美高梅游戏网站
Twitter的”fave”动画 2015/05/12 · HTML5 ·Twitter,动画 本文由 伯乐在线 -刘健超-J.c翻译,胡屹校稿。未经许可,禁止转载! 英文出处:cssanimation.rocks。欢迎加入翻译组。 变形--旋转 rotate()

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轴扭曲变形);

图片 4

3、skewY(y)仅使元素在垂直方向扭曲变形(Y轴扭曲变形)

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

演示结果

图片 6

Step1 - Photoshop

运动产生的错觉

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

变形--缩放 scale()

缩放 scale()函数 让元素根据中心原点对对象进行缩放。

缩放 scale 具有三种情况:

1、 scale(X,Y)使元素水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩放)

图片 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的值,作用是让元素放大。

Step2 - HTML/CSS

示例

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

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

图片 11

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

图片 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

Step3 - JavaScript(jQuery)

编辑:美高梅游戏网站 本文来源:设置一个角度值,本教程分为以下三步

关键词: