【澳门新葡亰手机版】jQuery 营造动态渐变按键 详细图文教程

【澳门新葡亰手机版】jQuery 营造动态渐变按键 详细图文教程

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

目前,作者超少写介绍CSS的稿子,因为感到网址开垦的要害照旧在劳动器端。

移步爆发的错觉

这段动漫的效果与利益相同于阅览古老的西洋镜,该装置显示的是生机勃勃层层一而再的缠绕着圆筒的插画。在下面包车型客车言传身教中,大家不选择圆筒,而是在某些成分内部显示生龙活虎俯拾都已经图片。

变形–缩放 scale()

缩放 scale()函数 让要素依照中央原点对目的进行缩放。

缩放 scale 具备三种情况:

1、 scale(X,Y)使成分水平方向和垂直方向同一时间缩放(也便是X轴和Y轴同一时候缩放卡塔 尔(英语:State of Qatar)

澳门新葡亰手机版 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

只是,CSS动漫除此之外,它实际太有用了。

示例

把鼠标悬停在有限上就足以看来动漫效果(请到原文翻开动漫效果——译者注卡塔 尔(阿拉伯语:قطر‎。

在本示例中,我们将从制作大器晚成密密层层能结合动漫的图纸初始。在此边,大家应用来源
Twitter 的“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)

澳门新葡亰手机版 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)转变矩阵,用来钦命三个2D转移,约等于直接行使一个[a
b c d e
f]改造矩阵。便是依照水平方向(X轴卡塔尔和垂直方向(Y轴卡塔 尔(英语:State of Qatar)重新定位成分,此属性值使用涉及到数学中的矩阵,小编在这里地只是一言以蔽之一下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

本文介绍CSS动漫的两大组成都部队分:transition和animation。作者不筹算交由每一条属性的亲力亲为介绍,那样能够写一本书。那篇随笔只是叁个简要介绍,支持初读书人领会全貌,同有的时候候又是三个相当的慢指南,当你想不起某叁个用法的时候,能够高效地找到提醒。

背景图片

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

澳门新葡亰手机版 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;
}

加了结束状态后,大器晚成旦鼠标悬停在该因素上,背景就可以从大家内定的职位移动到这大器晚成多种图片中最终一张的岗位上(为了合营浏览器,注意要充分相应的浏览器内核前缀——译者注卡塔 尔(英语:State of Qatar)。

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

请小心第3个准绳 animation。在本例中,大家利用 steps
时序函数,让background-position 属性资历了二个持续时间为1秒的连结。在
steps 部分的“55”那几个值,代表了这段动画是由55帧组成的。

当大家将鼠标悬停在此个成分上时,所看见的效果与利益是其背景图片通过五13个意气风发律的步调经验了一回对接。

别的这一个案例,也能够用 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效果卡塔 尔(英语:State of Qatar)。

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个步骤完结了八个动态渐变开关,在演示中,小编还提供了二个扩展示例,您能够跟着本人完毕叁个,也足以下载源代码修正定制,当然,您有啥样好的提议恐怕有啥样难题,迎接给自个儿留言。
躬行实践地址

下载地址

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

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

自己的入眼参谋资料是,2011年11月,Lea
Verou在JSConf.Asia方面包车型客车阐述《CSS in the 4th
Dimension》。那是三个可怜棒的发言,有视频和幻灯片,猛烈推荐。

admin

网站地图xml地图