创设动态渐变开关,十天明白CSS3

Twitter的”fave”动画

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

本文由 伯乐在线 –
刘健超-J.c
翻译,胡屹
校稿。未经许可,幸免转发!
斯洛伐克共和国(The Slovak Republic)语出处: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” 动画

目前 Facebook通过引进一段新的动画片重新规划了“fave”按键(也叫“fav”)。这段动画并不信赖CSS transition,而是由一密密麻麻图片组成的。下边体现怎么样用 CSS 的
animation-timing-function 属性中的 steps 时序函数(timing
function)重新创造这段动画。

变形–扭曲 skew()

扭曲skew()函数能够让要素倾斜显示。它能够将二个对象以当中央岗位围绕着X轴创设动态渐变开关,十天明白CSS3。和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

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

Step2 – HTML/CSS

示例

把鼠标悬停在有限上就能够见见动画效果(请到原文翻开动画效果——译者注)。

在本示例中,我们将从制作一多种能结合动画的图纸早先。在那边,大家运用来源
Facebook 的“fave”Logo动画的有个别图片集:

澳门葡京 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)

Step3 – JavaScript(jQuery)

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

Step4 – CSS修改

 

  最后结出如下:

澳门葡京 19

Step4 – CSS修改

 

  最后结出如下:

澳门葡京 20

背景图片

接下去, 大家得以增加一些体裁并安装背景图片地点:

澳门葡京 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;
}

加了截至状态后,一旦鼠标悬停在该因素上,背景就能从大家内定的岗位移动到这一文山会海图片中最终一张的任务上(为了同盟浏览器,注意要丰硕相应的浏览器内核前缀——译者注)。

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

当我们将鼠标悬停在这些成分上时,所看见的作用是其背景图片通过五十四个一律的步子经历了一回对接。

除此以外这一个案例,也能够用 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轴的二分一处。如下图所示:

澳门葡京 22

在未曾重新设置transform-origin改换成分原点地点的处境下,CSS变形进行的旋转、位移、缩放,扭曲等操作都以以元素协和主题岗位打开变形。但不菲时候,大家可以因而transform-origin来对成分举办原点地方变动,使成分原点不在成分的焦点地点,以达成需求的原点地点。

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

澳门葡京 23

身体力行显示:

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

示范结果:

澳门葡京 24

Step1 – Photoshop

1. 新建文件

  按键的尺码是100px X 80px,但由于大家要求成立二个有三种情形的CSS
sprite背景图,所以我们在Photoshop中开创(Ctrl+N)一个长度宽度为200px X
160px的图样文件,如下图:

澳门葡京 25

2. 创制参照他事他说加以考察线

  为了使绘制开关更便于,大家创造参谋线,从标尺中拉出参考线,假若你找不到标尺,能够按Ctrl+卡宴展现,如下图:

澳门葡京 26

3. 绘制形状

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

澳门葡京 27

4. 设置形状样式

  接上海教室最后一步,双击层,张开图层样式窗口,设置形状的体裁,首先选拔渐变叠合,设置渐变颜色从#3d3d3d到#8b8b8b,如下图:

澳门葡京 28

  然后,选拔“内发光”,设置混合格局为“平日”,不折射率为100%,颜色设置为#ffffff,图素大小设置为3像素,如下图:

澳门葡京 29

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

澳门葡京 30

5. 加多字体

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

澳门葡京 31

6. 装置字体样式

  同样的双击文字图层,打开文字图层样式,设置字体样式,点击“投影”,设置混合格局为“日常”,颜色为#3e3e3e,不发光度为百分百,角度为90度,距离为1像素,大小为2像素;点击“内阴影”,设置混合方式为“平常”,颜色为#澳门葡京 ,454545,不折射率为百分之七十五,角度为90度,距离为1像素,大小为2像素,如下图所示:

澳门葡京 32

  至此,大家就形成链接状态下的开关背景图,效果如下:

澳门葡京 33

7. 悬停背景图

  制作鼠标悬停状态下的按键背景图,把图层放入组内,复制组,移动,同仁一视命名,如下图:

澳门葡京 34

8.背景图属性

  修改hover背景图的体裁属性,展开背景图的图层样式窗口,选用“描边”,修改边框颜色为#004d77;采取“渐变叠合”,修改渐变从#1671a3到#5baedc,如下图:

 

澳门葡京 35

9. 安装字体样式

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

澳门葡京 36

10. 图层半晶莹剔透

  增多图层半晶莹剔透效果,按上述步骤修改,鼠标悬停背景图如下,最终是再加上一层半透明层,先增加二个200px
X 40px的天青层,置顶并设置中绿层的折射率为十分之一,如下图:

澳门葡京 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,大家得以让按键尤其炫彩一些,我们需求在事先基础上加二个<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, 1); //渐变至不透明
}, function () {
$(this).stop().fadeTo(650, 0); //渐变至全透明
});
});

时至先天,大家实现了JS代码,还要小心一个手续,CSS修改,见Step4。
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;
}

总结
  以上大家按4个步骤达成了三个动态渐变开关,在演示中,作者还提供了一个恢宏示例,您能够跟着本人完成一个,也足以下载源代码修改定制,当然,您有何好的提出或然有啥难题,接待给本身留言。
身体力行地址
http://demo.jb51.net/js/gcb\_download/gradual-change-button.html 下载地址

Step1 – Photoshop

1. 新建文件

  开关的尺寸是100px X 80px,但出于我们供给创设二个有二种情景的CSS
sprite背景图,所以大家在Photoshop中成立(Ctrl+N)二个长度宽度为200px X
160px的图片文件,如下图:

澳门葡京 40

2. 开立参谋线

  为了使绘制按键更易于,大家成立参照他事他说加以考察线,从标尺中拉出参谋线,尽管您找不到标尺,能够按Ctrl+汉兰达显示,如下图:

澳门葡京 41

3. 绘制形状

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

澳门葡京 42

4. 装置形状样式

  接上海体育场面最后一步,双击层,展开图层样式窗口,设置形状的体制,首先选择渐变叠合,设置渐变颜色从#3d3d3d到#8b8b8b,如下图:

澳门葡京 43

  然后,选取“内发光”,设置混合情势为“平常”,不光滑度为百分之百,颜色设置为#ffffff,图素大小设置为3像素,如下图:

澳门葡京 44

  之后,再选取“描边”,设置大小为1像素,地方为“内部”,颜色为天青#000000,如下图:

澳门葡京 45

5. 增加字体

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

澳门葡京 46

6. 装置字体样式

  同样的双击文字图层,张开文字图层样式,设置字体样式,点击“投影”,设置混合情势为“正常”,颜色为#3e3e3e,不发光度为百分百,角度为90度,距离为1像素,大小为2像素;点击“内阴影”,设置混合情势为“正常”,颜色为#454545,不光滑度为十分之三,角度为90度,距离为1像素,大小为2像素,如下图所示:

澳门葡京 47

  至此,大家就完了链接状态下的开关背景图,效果如下:

澳门葡京 48

7. 悬停背景图

  制作鼠标悬停状态下的按键背景图,把图层纳入组内,复制组,移动,人己一视命名,如下图:

澳门葡京 49

8.背景图属性

  修改hover背景图的样式属性,展开背景图的图层样式窗口,选取“描边”,修改边框颜色为#004d77;采用“渐变叠合”,修改渐变从#1671a3到#5baedc,如下图:

 

澳门葡京 50

9. 装置字体样式

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

澳门葡京 51

10. 图层半透明

  增多图层半透明效果,按以上步骤修改,鼠标悬停背景图如下,最终是再增多一层半透明层,先加多贰个200px
X 40px的灰白层,置顶并安装灰湖绿层的光滑度为一成,如下图:

澳门葡京 52

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

澳门葡京 53

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,我们得以让开关尤其炫丽一些,大家须求在事先基础上加一个<span>成分,作为鼠标悬停时候显得的背景层,那么HTML会在DOM加载成功后修改成为:

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

  <span>成分在鼠标悬停前是全透明的,鼠标经过时,逐步不透明,以到达渐变的意义,动画进程如下图:

澳门葡京 54

因而上述解析,大家得以写出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, 1); //渐变至不透明
}, function () {
$(this).stop().fadeTo(650, 0); //渐变至全透明
});
});

从那之后,大家完结了JS代码,还要小心叁个步骤,CSS修改,见Step4。
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;
}

总结
  以上大家按4个步骤达成了三个动态渐变开关,在示范中,笔者还提供了一个恢弘示例,您能够跟着本身实现贰个,也足以下载源代码修改定制,当然,您有如何好的提议或许有怎么着难题,迎接给自家留言。
演示地址

下载地址

Step1 – Photoshop Step2 –
HTML/CSS Step3 – JavaScript(jQuery) Step4 – CSS修改 最后结果如下: Step1

  • Photoshop 1. 新建文件 开关的尺寸是…

何以不采取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属性主要有:

澳门葡京 55

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

演示结果:

鼠标移入

澳门葡京 56

鼠标移出

澳门葡京 57

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

用三个简单的例证来表明那一个难点:

就算你的开头状态设置了体制“width”,“height”,“background”,当你在终始状态都转移了这多少个属性,那么all意味着的正是“width”、“height”和“background”。假诺你的终始状态只更改了“width”和“height”时,那么all代表的正是“width”和“height”。

你也许感兴趣的篇章:

  • jQuery得到字体颜色十五个人码的办法
  • jquery完成实时改造网页字体大小、字体背景象和颜色的法门
  • JQuery达成动态及时退换字体颜色的艺术
  • jQuery达成的背景颜色渐变动画效用示例
  • jQuery与js完结颜色渐变的办法
  • jQuery完成的文字hover颜色渐变效果实例
  • 基于jquery的direction图片渐变动画功能
  • jQuery实现的立体文字渐变效果
  • jQuery渐变发光导航菜单的实例代码
  • jquery完结模拟百分比进程条渐变效果代码
  • jQuery落成渐变弹出层和弹出菜单的法门
  • jquery完成鼠标经过呈现下划线的渐变下拉菜单效果代码
  • jQuery落成字体颜色渐变效果的方法

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

亲自去做结果:

鼠标移入

澳门葡京 58

鼠标移出

澳门葡京 59

备忘小条

若果您欢愉那篇文章,你能够将它分享在推特,可能封存上面包车型地铁备忘小条,以便参照他事他说加以考察。

澳门葡京 60

打赏帮忙本身翻译越来越多好小说,感谢!

打赏译者

卡通–过渡函数 transition-timing-function

transition-timing-function属性指的是连接的“缓动函数”。首要用以钦赐浏览器的交接速度,以及连接时期的操作举行情形,在那之中要富含以下两种函数:

澳门葡京 61

(单击图片可推广)

案例展现:

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

亲自过问结果

鼠标移入:

澳门葡京 62

鼠标移出:

澳门葡京 63

打赏辅助我翻译越多好文章,多谢!

任选一种支付办法

澳门葡京 64
澳门葡京 65

赞 收藏
评论

动画–过渡延迟时间 transition-delay

transition-delay属性transition-duration属性最为类似,分歧的是transition-duration是用来设置过渡动画的持续时间,而transition-delay首要用于钦命三个动画开始进行的时日,也正是说当改换成分属性值后多久早先奉行。

偶尔大家想退换三个或然多少个css属性的transition效果时,只要把多少个transition的申明串在共同,用逗号(“,”)隔开分离,然后分别能够有些分裂的接轨时间和其时间的速率转换方式。但供给值得注意的某个:第一个时间的值为
transition-duration,第1个为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;
}

示范结果

鼠标移入:

澳门葡京 66

鼠标移出:

澳门葡京 67

有关笔者:刘健超-J.c

澳门葡京 68

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

澳门葡京 69

相关文章

发表评论

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

*
*
Website