连着和卡通,详细图像和文字化教育程

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

 

本课程分为以下三步:

联网和卡通片

transition(过渡)
在CSS3引进transition此前css没不经常间轴,全部的情形变化都以一念之差实现
div{ height:15px; width:15px;}div:hover{ height: 450px; width: 450px;}

transition的功效在于,钦定状态变化所急需的小时
transition: 1s;

点名属性
我们还是能内定transition适用的属性,比如只适用于height
transition: 1s height;

那样一来,独有height的变通须要1秒达成,其余变化(首假如width)还是须臾间落到实处,在同一行transition语句中,可以分级钦定多少个属性
transition: 1s height, 1s width;

delay(延时)
笔者们还足以内定变化的延时上马,比如那么些地点大家期待让height首发生变化,等收尾以往,再让width发生变化, 大家只必要为width内定一个delay参数
transition: 1s height, 1s 1s width;

上面代码内定,width在1秒今后,再起始转移,也便是延迟(delay)1秒
delay的确实含义在于,它钦赐了动画片发生的逐个,使得四个例外的transition能够连在一齐,变成复杂效果
transition-timing-function
transition的情景变化速度(又称timing function),私下认可不是匀速的,而是慢慢放缓,那叫做ease 除了ease以外,别的方式还富含
linear:匀速
ease-in:加速
ease-out:减速
cubic-bezier函数(贝塞尔函数)

贝塞尔函数工具
语法
transition: 1s 1s height ease;

那实在是一个简写方式,能够单独定义成各样属性
transition-property: height;transition-duration: 1s;transition-delay: 1s;transition-timing-function: ease;

注意事项
眼前,各大浏览器(满含IE 10)都曾经支撑无前缀的transition,所以transition已经能够很安全地不加浏览器前缀
transition须要分明精晓,开始处境和得了状态的现实性数值,技巧揣摸出中间状态,什么none到block之类的是特别的
transition是二次性的,不可能重新发生,除非再三触发

事件
transitionend
transitionend 事件会在 CSS transition 甘休后触发.
当transition完结前移除transition时,比如移除css的transition-property 属性,事件将不会被触发.如在transition实现前安装 display: none,事件一样不会被触发.
多少个属性爆发了变动就接触四次,比方 ``` div{ transition: height 1s, width 1s; } div:hover{ width: 100px; height: 100px; }

一次hover会触发一次transitionend事件

  • 留心分化浏览器中的前缀 webkitTransitionEnd mozkitTransitionEnd

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轴同期按一定的角度值进行翻转变形);

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

animation(动画)

transition 相比轻巧,animation可以帮我们兑现复杂的卡通

一举手一投足发生的错觉

这段动画的效果类似于阅览古老的西洋镜,该装置呈现的是一多元一而再的缠绕着圆筒的插画。在底下的演示中,大家不利用圆筒,而是在有个别成分内部显示一文山会海图片。

变形--缩放 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

基本用法

@keyframes change-color{ 0% { background: red; } 50%{ background: blue; } 100%{ background: orange; }}div{ height: 100px; width: 200px; border: 1px solid #111;}div:hover{ animation-name: change-color; animation-duration: 2s;}

咱们采用keyframes(关键帧)来定义三个卡通效果, change-color是大家得到动画名字,每一种百分比前面写的是应和时间点本人第一帧样式, 定义好后,在animation(动画)属性中调用,2s 表示的卡通的持续时间
 钦命播放次数(animation-iteration-count)
暗中认可情状下,动画只会播放三次, 大家得以钦赐动画具体播放的次数,例如3次:
div:hover { animation-name: change-color; animation-duration: 2s; animation-iteration-count: 3;}

也得以有线循环播放:
div:hover { animation-name: change-color; animation-duration: 2s; animation-iteration-count: infinite;}

心跳demo
延时(animation-delay)
animation-timing-function
动画播放前后的情状(animation-fill-mode)
animation-fill-mode: none | backwards | forwards| both;

none: 动画施行前后不更动任何样式
forwards: 动画甘休后的对象保持动画最终一帧的体制
backwards: 动画肇始前目的保持动画第一帧的样式(必需合营延时技巧见到作用, 若是设置为backwards, 延时之间的体制是卡通片第一帧的体裁, 不然延时里边是指标私下认可样式)
both: 同期采取forwards和 backwards

卡通播放的趋向(animation-direction)
动画片三番两次播发时,每便都以从甘休状态跳回到初始状态,再开播。animation-direction属性,能够更动这种表现
animation-direction能够使用下列值:
normal: 符合规律播放, 暗许值;
reverse: 倒着播放
alternate: 第二遍不奇怪播放, 第二倒着播放, .. 那样交替的巡回下去
alternate-reverse: 第二次倒着播放, 第二次平常播放, .. 那样交替的巡回下去

下图解释了它的法规(假定动画一连播发三次)

图片 11

差没有多少说,animation-direction钦点了动画片播放的来头,最常用的值是normal和reverse。浏览器对任何值的支撑情状倒霉,应该慎用
语法
div:hover { animation-name: change-color; animation-duration: 1s; animation-timing-function: linear; animation-delay: 1s; animation-fill-mode:forwards; animation-direction: normal; animation-iteration-count: 3;}

简写
animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode;

例子:
div:hover { animation: 1s 1s change-color linear 3 forwards normal;}

keyframes关键字用来定义动画的各种状态,它的写法万分自由
@keyframes change-color { 0% { background: #c00 } 50% { background: orange } 100% { background: yellowgreen }}

0%能够用from代表,百分之百得以用to代表,由此地点的代码等同于下面包车型地铁样式
@keyframes change-color { from { background: #c00 } 50% { background: orange } to { background: yellowgreen }}

若是不难某些状态,浏览器会活动推算中间状态,所以上边都以合法的写法。
@keyframes change-color { 50% { background: orange } to { background: yellowgreen }}@keyframes change-color { to { background: yellowgreen }}

依旧,能够把两个情景写在一行。
div:hover { animation: 1s change-color infinite steps(10);}

除此以外一些亟需专心的是,浏览器从贰个气象向另二个景色过渡,是平整对接。steps函数能够兑现分步过渡。
div:hover { animation: 1s change-color infinite steps(10);}

文字输入效果demo
animation-play-state
有的时候候,动画播放进度中,会忽然甘休。那时,暗中认可行为是跳回到动画的发端处境,借使想让动画片保持猛然止住时的情事,就要选用animation-play-state属性。
div { animation: spin 1s linear infinite; animation-play-state: paused;}div:hover { animation-play-state: running;}

示例

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

在本示例中,我们将从构建一系列能整合动画的图片开首。在这里,我们利用来源 Facebook 的“fave”Logo动画的一对图片集:

图片 12

为了能让那一个帧动起来,大家要求把它们放置在一排上。在这几个文件中,这一个帧已经排列在一排上了,那象征大家得以经过安装背景地点(background-position)属性使背景从第一帧过渡到结尾一帧。

图片 13

变形--位移 translate()

translate()函数能够将元素向钦点的主旋律移动,类似于position中的relative。或以轻便的接头为,使用translate()函数,能够把成分从原来的岗位移动,而不影响在X、Y轴上的别的Web组件。

translate大家分为二种情形:

1、translate(x,y)水平方向和垂直方向同一时间活动(约等于X轴和Y轴同时活动)

图片 14

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

图片 15

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

图片 16

实例演示:因而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);
}

亲自过问结果

图片 17

Step3 - JavaScript(jQuery)

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)调换矩阵,用来钦定叁个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);
}

示范结果:

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

当大家将鼠标悬停在这么些因素上时,所见到的功力是其背景图片通过52个一律的步调经历了三次对接。

除此以外那几个案例,也能够用 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

  然后,选拔“内发光”,设置混合方式为“不荒谬”,不折射率为百分百,颜色设置为#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 下载地址

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

图片 40

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

演示结果:

鼠标移入

图片 41

鼠标移出

图片 42

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

用多个简约的例子来注明这几个题材:

倘让你的始发状态设置了体制“width”,“height”,“background”,当您在终始状态都改成了那八个属性,那么all表示的便是“width”、“height”和“background”。假诺您的终始状态只变动了“width”和“height”时,那么all表示的就是“width”和“height”。

您或者感兴趣的稿子:

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

“steps()”的其余用法

背景动画精灵(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;
}

亲自过问结果:

鼠标移入

图片 43

鼠标移出

图片 44

备忘小条

假诺你喜欢那篇小说,你能够将它分享在推特(Twitter),或然封存下边包车型大巴备忘小条,以便参照他事他说加以考察。

图片 45

打赏支持本人翻译更加多好小说,多谢!

打赏译者

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

transition-timing-function属性指的是对接的“缓动函数”。首要用于内定浏览器的联网速度,以及连接时期的操作举市场价格况,个中要包罗以下二种函数:

图片 46

(单击图片可拓展)

案例展现:

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

示范结果

鼠标移入:

图片 47

鼠标移出:

图片 48

打赏帮衬作者翻译越多好小说,多谢!

任选一种支付情势

图片 49 图片 50

赞 收藏 评论

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

transition-delay属性transition-duration属性然则类似,区别的是transition-duration是用来安装过渡动画的持续时间,而transition-delay首要用来钦赐二个动画最初进行的年月,也正是说当改动成分属性值后多久最初实行。

一时我们想退换几个只怕多少个css属性的transition效果时,只要把多少个transition的宣示串在联合,用逗号(“,”)隔断,然后分别能够有各自差别的后续时间和其时刻的速率转变方式。但要求值得注意的一些:第多个小时的值为 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;
}

演示结果

鼠标移入:

图片 51

鼠标移出:

图片 52

有关我:刘健超-J.c

图片 53

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

图片 54

本文由星彩网app下载发布于前端技术,转载请注明出处:连着和卡通,详细图像和文字化教育程

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。