web前端 53

制作动态渐变开关,十天精晓CSS3

By admin in web前端 on 2019年10月24日

Twitter的”fave”动画

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

本文由 伯乐在线 –
刘健超-J.c
翻译,胡屹
校稿。未经许可,禁绝转发!
意国语出处:cssanimation.rocks。迎接参与翻译组。

变形–旋转 rotate()

旋转rotate()函数由此点名的角度参数使成分相对原点举行旋转。它主要在二维空间内实行操作,设置七个角度值,用来内定旋转的小幅。要是那个值为正值,成分相对原点大旨顺时针旋转;如果这一个值为负值,成分相对原点宗旨逆时针旋转。如下图所示:

web前端 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);
}

躬体力行结果

web前端 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轴同一时候按一定的角度值进行翻调换形);

web前端 3

先是个参数对应X轴,第四个参数对应Y轴。假诺第1个参数未提供,则值为0,约等于Y轴方向上无斜切。

2、skewX(x)仅使成分在档期的顺序方向扭曲变形(X轴扭曲变形);

web前端 4

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

web前端 5

web前端,亲自过问演示:

通过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);
}

示范结果

web前端 6

Step1 – Photoshop

移步发生的错觉

这段动画的遵守相近于观察古老的西洋镜,该装置显示的是一密密麻麻一而再再而三的缠绕着圆筒的插图。在底下的现身说法中,大家不选用圆筒,而是在某些成分内部显示意气风发多种图片。

变形–缩放 scale()

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

缩放 scale 具备三种景况:

1、 scale(X,Y)使成分水平方向和垂直方向同偶然候缩放(也正是X轴和Y轴同时缩放)

web前端 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轴缩放)

web前端 8

3、scaleY(y)成分仅垂直方向缩放(Y轴缩放)

web前端 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);
}

演示结果

web前端 10

注意: scale()的取值默许的值为1,当班值日设置为0.010.99时期的其它值,功能使一个成分缩短;而其他大于或等于1.01的值,成效是让要素放大。

Step2 – HTML/CSS

示例

把鼠标悬停在点滴上就足以观望动画效果(请到原文翻开动画效果——译者注)。

在本示例中,我们将从制作一文山会海能整合动画的图纸在此之前。在那,大家利用来源
推特(TWTR.US) 的“fave”Logo动画的生机勃勃部分图片集:

web前端 11

为了能让这个帧动起来,大家须求把它们放置在一排上。在此个文件中,那个帧已经排列在一排上了,那意味大家可以透过安装背景地方(background-position)属性使背景从第风度翩翩帧过渡到最后后生可畏帧。

web前端 12

变形–位移 translate()

translate()函数能够将成分向钦赐的取向移动,相符于position中的relative。或以不难的了然为,使用translate()函数,能够把成分从原来的任务移动,而不影响在X、Y轴上的别的Web组件。

translate大家分为三种状态:

1、translate(x,y)水平方向和垂直方向同一时常候活动(也正是X轴和Y轴同不时间活动)

web前端 13

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

web前端 14

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

web前端 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);
}

示范结果

web前端 16

Step3 – JavaScript(jQuery)

Steps() 时序函数

大多数的时序函数,比方 ease(缓冲)和
cubic-bezier(三次贝塞尔),都能让要素从开头状态平滑地联网到最后状态。steps
时序函数与此差别,它并不是坦荡地接通,而是将衔接进度分割为一定数额的步骤,何况在这里些步骤之间相当慢地移动。

web前端 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);
}

演示结果:

web前端 18

Step4 – CSS修改

 

  最后结果如下:

web前端 19

背景图片

接下去, 我们能够增添一些体制并设置背景图片地方:

web前端 20

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

当大家将鼠标悬停在这里个成分上时,所看见的机能是其背景图片通过54个相仿的步骤经历了三回对接。

别的那个案例,也得以用 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轴的百分之三十处。如下图所示:

web前端 21

在并未有重新设置transform-origin改换成分原点地点的图景下,CSS变形进行的团团转、位移、缩放,扭曲等操作都是以元素和煦大旨地方进行变形。但不菲时候,大家得以因而transform-origin来对成分实行原点地方变动,使成分原点不在成分的中坚岗位,以实现须求的原点地点。

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

web前端 22

演示展现:

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

示范结果:

web前端 23

Step1 – Photoshop

1. 新建文件

  按键的尺码是100px X 80px,但由于大家须要创建四个有二种景况的CSS
sprite背景图,所以大家在Photoshop中创设(Ctrl+N)多少个长度宽度为200px X
160px的图形文件,如下图:

web前端 24

2. 创立参考线

  为了使绘制按键更便于,大家创造参照他事他说加以考查线,从标尺中拉出参谋线,假诺你找不到标尺,能够按Ctrl+昂Cora突显,如下图:

web前端 25

3. 制图形状

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

web前端 26

4. 安装形状样式

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

web前端 27

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

web前端 28

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

web前端 29

5. 增添字体

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

web前端 30

6. 设置字体样式

  相通的双击文字图层,展开文字图层样式,设置字体样式,点击“投影”,设置混合格局为“寻常”,颜色为#3e3e3e,不光滑度为百分之百,角度为90度,间隔为1像素,大小为2像素;点击“内阴影”,设置混合方式为“不奇怪”,颜色为#454545,不光滑度为百分之三十四,角度为90度,间隔为1像素,大小为2像素,如下图所示:

web前端 31

  至此,我们就成功链接状态下的按键背景图,效果如下:

web前端 32

7. 悬停背景图

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

web前端 33

8.背景图属性

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

 

web前端 34

9. 设置字体样式

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

web前端 35

10. 图层半透明

  增添图层半透明效果,按上述步骤改革,鼠标悬停背景图如下,最后是再加上后生可畏层半透明层,先增加贰个200px
X 40px的杏黄层,置顶并设置金红层的折射率为百分之十,如下图:

web前端 36

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

web前端 37

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>成分在鼠标悬停前是全透明的,鼠标经过时,慢慢不透明,以达成渐变的职能,动画进度如下图:

web前端 38

透过以上深入分析,大家能够写出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属性重要有:

web前端 39

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

示范结果:

鼠标移入

web前端 40

鼠标移出

web前端 41

极度注意:当“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;
}

亲自去做结果:

鼠标移入

web前端 42

鼠标移出

web前端 43

备忘小条

比方您赏识那篇文章,你能够将它分享在推特(Twitter),恐怕封存下边包车型地铁备忘小条,以便参谋。

web前端 44

打赏辅助作者翻译更多好作品,多谢!

打赏译者

动画片–过渡函数 transition-timing-function

transition-timing-function属性指的是连着的“缓动函数”。首要用来钦定浏览器的连片速度,以至连接时期的操作实行情状,在那之中要包蕴以下二种函数:

web前端 45

(单击图片可推广)

案例展现:

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

身体力行结果

鼠标移入:

web前端 46

鼠标移出:

web前端 47

打赏支持小编翻译越多好文章,多谢!

任选风姿浪漫种支付办法

web前端 48
web前端 49

赞 收藏
评论

动画片–过渡延迟时间 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;
}

演示结果

鼠标移入:

web前端 50

鼠标移出:

web前端 51

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

web前端 52

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

web前端 53

发表评论

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

网站地图xml地图
Copyright @ 2010-2020 澳门新葡亰官网app 版权所有