照片墙的&#82二1;fave&#82二一;动画

2019-04-08 02:56栏目:ca888圈内

Twitter的”fave”动画

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

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

变形--旋转 rotate()

旋转rotate()函数因此点名的角度参数使成分相对原点举办旋转。它根本在2维空间内进行操作,设置一个角度值,用来钦点旋转的幅度。固然那一个值为正值,成分相对原点大旨顺时针旋转;假如那些值为负值,成分相对原点中央逆时针旋转。如下图所示:

图片 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” 动画

近期 Instagram通过引进一段新的卡通片重新规划了“fave”按钮(也叫“fav”)。那段动画并不注重CSS transition,而是由一名目繁多图片组成的。上边展示怎么样用 CSS 的 animation-timing-function 属性中的 steps 时序函数(timing function)重新创设那段动画。

变形--扭曲 skew()

扭曲skew()函数能够让要素倾斜显示。它能够将多个目的以其主旨岗位围绕着X轴Y轴安分守纪一定的角度倾斜。那与rotate()函数的旋转分歧,rotate()函数只是旋转,而不会变动成分的形象。skew()函数不会旋转,而只会改变成分的形制。

Skew()具有三种情状:

①、skew(x,y)使成分在档次和垂直方向同时扭曲(X轴和Y轴同时按自然的角度值举办翻转变形);

图片 3

先是个参数对应X轴,第1个参数对应Y轴。如若第二个参数未提供,则值为0,也正是Y轴方向上无斜切。

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

图片 4

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

图片 5

示范演示:

通过skew()函数将星型变成平行4边形。

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

现行反革命,小编很少写介绍CSS的稿子,因为觉得网站开发的严重性照旧在劳动器端。

移步发生的错觉

那段动画的效劳类似于观望古老的西洋镜,该装置展现的是壹三种一而再的环绕着圆筒的插图。在底下的以身作则中,大家不应用圆筒,而是在有个别成分内部展现1雨后玉兰片图片。

变形--缩放 scale()

缩放 scale()函数 让要素依照大旨原点对指标举办缩放。

缩放 scale 具有三种意况:

一、 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

三、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()的取值暗中同意的值为壹,当班值日设置为0.010.99里面包车型客车其余值,功效使三个要素减少;而任何大于或等于1.01的值,成效是让要素放大。

Step2 - HTML/CSS

只是,CSS动画除却,它其实太有用了。

示例

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

在本示例中,我们将从创设一体系能整合动画的图片开端。在此处,大家选拔来源 Facebook 的“fave”图标动画的片段图片集:

图片 11

为了能让那几个帧动起来,大家供给把它们放置在一排上。在那个文件中,这几个帧已经排列在一排上了,那代表大家能够通过安装背景地方(background-position)属性使背景从第3帧过渡到终极一帧。

图片 12

变形--位移 translate()

translate()函数能够将成分向钦赐的势头移动,类似于position中的relative。或以简单的明亮为,使用translate()函数,能够把成分从原本的职责移动,而不影响在X、Y轴上的其他Web组件。

translate大家分为三种情景:

一、translate(x,y)水平方向和垂直方向同时活动(也便是X轴和Y轴同时活动)

图片 13

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

图片 14

三、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)

图片 17

Steps() 时序函数

多数的时序函数,例如 ease(缓冲)和 cubic-bezier(叁回贝塞尔),都能让要素从初阶状态平滑地连贯到终极状态。steps 时序函数与此差别,它并不是一马平川地衔接,而是将联网进程分割为自然数量的步调,并且在这一个手续之间快速地移动。

图片 18

我们先创制如下的 HTML 代码:

XHTML

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

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

变形--矩阵 matrix()

matrix() 是三个含多少个值的(a,b,c,d,e,f)变换矩阵,用来钦赐贰个二D转换,也正是间接运用二个[a b c d e f]转移矩阵。就是基于水平方向(X轴)和垂直方向(Y轴)重新定位成分,此属性值使用涉及到数学中的矩阵,作者在此地只是简短的说一下CSS三中的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);
}

演示结果:

图片 19

Step4 - CSS修改

 

  最后结出如下:

图片 20

本文介绍CSS动画的两大组成都部队分:transition和animation。作者不打算交由每一条属性的详细介绍,那样能够写一本书。那篇小说只是2个简介,接济初学者领悟全貌,同时又是二个高效指南,当你想不起某2个用法的时候,可以赶快地找到提醒。

背景图片

接下去, 大家得以添加壹些体制并安装背景图片地点:

图片 21

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

加了结束状态后,1旦鼠标悬停在该因素上,背景就会从大家钦赐的岗位移动到那一层层图片中最终一张的职位上(为了协作浏览器,注意要添加相应的浏览器内核前缀——译者注)。

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”这么些值,代表了那段动画是由5伍帧组成的。

当大家将鼠标悬停在那一个因素上时,所观望的功效是其背景图片通过伍十一个1样的步子经历了一回对接。

除此以外那么些案例,也足以用 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

其他三个成分都有1个大旨点,默许景况之下,当中央点是高居成分X轴和Y轴的50%处。如下图所示:

图片 22

在一贯不重置transform-origin改变成分原点地方的景况下,CSS变形进行的转动、位移、缩放,扭曲等操作都是以成分协调大旨岗位展开变形。但过多时候,大家得以透过transform-origin来对成分举办原点地点变动,使成分原点不在成分的主干岗位,以达到要求的原点地点。

transform-origin取值和要素设置背景中的background-position取值类似,如下表所示:

图片 23

示范展示:

经过transform-origin改变成分原点到左上角,然后开始展览顺时旋转4伍度。

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

示范结果:

图片 24

Step1 - Photoshop

一. 新建文件

  按钮的尺码是十0px X 80px,但由于我们供给创制1个有两种情形的CSS sprite背景图,所以大家在Photoshop中开创(Ctrl N)叁个长宽为200px X 160px的图样文件,如下图:

图片 25

二. 成立参考线

  为了使绘制按钮更易于,大家创建参考线,从标尺中拉出参考线,如果您找不到标尺,能够按Ctrl 卡宴呈现,如下图:

图片 26

三. 制图形状

  选取工具面板中的矩形工具,设置圆角半径为拾px,在画布上制图形状,如下图:

图片 27

四. 安装形状样式

  接上图最终一步,双击层,打开图层样式窗口,设置形状的样式,首先选用渐变叠加,设置渐变颜色从#3d3d3d到#8b8b8b,如下图:

图片 28

  然后,选用“内发光”,设置混合情势为“不荒谬”,不折射率为百分百,颜色设置为#ffffff,图素大小设置为三像素,如下图:

图片 29

  之后,再选用“描边”,设置大小为1像素,地点为“内部”,颜色为浅橙#000000,如下图:

图片 30

伍. 添加字体

  输入文本,设置文字相对程度和垂直居中,字体为正直准圆简体,字号3陆点,加粗平滑,颜色为樱草黄(#FFFFFF),如下图:

图片 31

6. 装置字体样式

  同样的双击文字图层,打开文字图层样式,设置字体样式,点击“投影”,设置混合格局为“不荒谬”,颜色为#三e三e三e,不反射率为百分百,角度为90度,距离为壹像素,大小为二像素;点击“内阴影”,设置混合形式为“平常”,颜色为#454545,不折射率为陆分3,角度为90度,距离为1像素,大小为二像素,如下图所示:

图片 32

  至此,大家就做到链接状态下的按钮背景图,效果如下:

图片 33

7. 悬停背景图

  制作鼠标悬停状态下的按钮背景图,把图层放入组内,复制组,移动,不分相互命名,如下图:

图片 34

八.背景图属性

  修改hover背景图的体制属性,打开背景图的图层样式窗口,接纳“描边”,修改边框颜色为#00四d7七;采取“渐变叠加”,修改渐变从#1671a3到#5baedc,如下图:

 

图片 35

玖. 安装字体样式

  打开字体图层样式,选取“投影”,修改投影颜色为#207aad;选拔“内阴影”,修改字体颜色为#0d4f74,如下图:

图片 36

10. 图层半晶莹剔透

  添加图层半晶莹剔透效果,按上述步骤修改,鼠标悬停背景图如下,最后是再加上一层半透明层,先添加一个200px X 40px的褐色层,置顶并安装玫瑰蓝紫层的折射率为百分之10,如下图:

图片 37

  最终,大家做到的CSS sprite背景图如下,您也足以点击下载PSD文件。

图片 38

Step2 - HTML/CSS
  按钮的HTML代码相当粗略:
<a class=”button”>前端档案</a>
  再通过CSS设置一下背景图片就足以了,CSS代码如下:

复制代码 代码如下:

/*链接按钮样式*/
.button {
width:200px;
height:80px;
display:block;
background:url(bg_button.gif) top no-repeat;
text-indent:-9999px;
}
/*按钮悬停样式*/
.button:hover{
background:url(bg_button.gif) bottom no-repeat;
}

  依照大家后面设计的图形,按钮的长度宽度为200px X 80px,背景图为中湖蓝按钮。那段CSS就能够完毕大家演示中的第三种意义(纯CSS效果)。

Step3 - JavaScript/jQuery

  通过JavaScript,大家能够让按钮特别炫酷一些,大家须要在前边基础上加2个<span>成分,作为鼠标悬停时候显得的背景层,那么HTML会在DOM加载成功后修改成为:

view sourceprint?<a class=”button”><span class=”hover”>前端档案</span></a>

  <span>成分在鼠标悬停前是全透明的,鼠标经过时,渐渐不透明,以高达渐变的效应,动画进度如下图:

图片 39

经过上述剖析,大家能够写出jQuery代码如下,在DOM加载成功后,为按钮链接添加<span>层用作鼠标经过时的背景图,在为<span>成分添加鼠标悬停事件,鼠标经过时,渐变至不透明,鼠标离开时,渐变至全透明。

复制代码 代码如下:

//把文件包括到<span>成分中,再附加到.button中
$('.jsbutton,.viewbutton,.downloadbutton').wrapInner('<span class="hover"></span>').css('textIndent','0').each(function () {
//先安装<span>成分中全透明,再添加鼠标悬停事件
$('span.hover').css('opacity', 0).hover(function () {
$(this).stop().fadeTo(650, 一); //渐变至不透明
}, function () {
$(this).stop().fadeTo(650, 0); //渐变至全透明
});
});

时至明天,大家做到了JS代码,还要注意五个手续,CSS修改,见Step四。
Step4 - CSS修改
  在纯CSS效果的言传身教中,我们是选择:hover伪类来兑现sprite图片的切换,当大家采纳jQuery后,是引进几个<span>层作为鼠标经过时背景图,所以CSS供给做如下修改:

复制代码 代码如下:

/*后面的按钮悬停样式*/
.button:hover{
background:url(bg_button.gif) bottom no-repeat;
}

修改为

复制代码 代码如下:

/*不须要在安装:hover的样式,而是设置span.hover的样式*/
.button span.hover {
/*只顾要利用相对化定位*/
position: absolute;
display: block;
width:200px;
height:80px;
background:url(bg_button.gif) bottom no-repeat;
text-indent:-9999px;
}

总结
  以上大家按五个步骤实现了二个动态渐变按钮,在演示中,笔者还提供了三个恢宏示例,您可以随着本身完结三个,也能够下载源代码修改定制,当然,您有何好的提议或许有哪些难点,欢迎给笔者留言。
示范地址 http://demo.jb51.net/js/gcb_download/gradual-change-button.html 下载地址

本身的第三参考资料是,20一三年二月,Lea Verou在JSConf.Asia方面包车型大巴发言《CSS in the 4th Dimension》。那是多个非常棒的阐述,有视频和幻灯片,强烈推荐。

版权声明:本文由ca888发布于ca888圈内,转载请注明出处:照片墙的&#82二1;fave&#82二一;动画