澳门金莎娱乐手机版 Web前端 本学科分为以下三步,用来钦点旋转的上涨的幅度【澳门金莎娱乐手机版】

本学科分为以下三步,用来钦点旋转的上涨的幅度【澳门金莎娱乐手机版】



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

近年来 Facebook通过引进意气风发段新的卡通片重新设计了“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轴。假诺第1个参数未提供,则值为0,相当于Y轴方向上无斜切。

2、skewX(x)仅使元素在等级次序方向扭曲变形(X轴扭曲变形卡塔 尔(英语:State of Qatar);

澳门金莎娱乐手机版 4

3、skewY(y)仅使成分在笔直方向扭曲变形(Y轴扭曲变形卡塔 尔(阿拉伯语:قطر‎

澳门金莎娱乐手机版 5

演示演示:

通过skew(卡塔 尔(英语:State of Qatar)函数将纺锤形形成平行四边形。

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

移步发生的错觉

这段动漫的功能相似于观望古老的西洋镜,该装置展现的是生机勃勃多种三番一次的拱卫着圆筒的插画。在下边包车型地铁亲自过问中,大家不行使圆筒,而是在有个别成分内部显示一文山会海图片。

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

示例

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

在本示例中,大家将从制作风姿罗曼蒂克雨后春笋能结成动漫的图形初阶。在这里地,大家采用来源
推特(TWTR.US) 的“fave”图标动漫的局地图片集:

澳门金莎娱乐手机版 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)

Steps() 时序函数

大部的时序函数,比如 ease(缓冲卡塔 尔(英语:State of Qatar)和
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轴卡塔 尔(英语:State of Qatar)和垂直方向(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

背景图片

接下去, 我们得以增添一些体制并安装背景图片地方:

澳门金莎娱乐手机版 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;
}

加了结束状态后,意气风发旦鼠标悬停在该因素上,背景就能从我们钦点的岗位移动到那一各样图片中最终一张的职责上(为了合营浏览器,注意要增加相应的浏览器内核前缀——译者注卡塔 尔(英语: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;
  }
}

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

当我们将鼠标悬停在此个因素上时,所看到的作用是其背景图片通过53个相似的手续经验了三遍对接。

别的这些案例,也得以用 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轴的二分一处。如下图所示:

澳门金莎娱乐手机版 21

在未曾重新载入参数transform-origin改动成分原点地点的景色下,CSS变形实行的团团转、位移、缩放,扭曲等操作都以以成分和睦宗旨岗位展开变形。但好多时候,大家能够经过transform-origin来对成分实行原点地点变动,使成分原点不在成分的骨干岗位,以到达供给的原点地点。

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

澳门金莎娱乐手机版 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;
}

演示结果:

澳门金莎娱乐手机版 23

Step1 – Photoshop

1. 新建文件

  按键的尺寸是100px X 80px,但由于大家需求成立贰个有二种境况的CSS
sprite背景图,所以大家在Photoshop中开创(Ctrl+N卡塔 尔(阿拉伯语:قطر‎叁个长度宽度为200px X
160px的图纸文件,如下图:

澳门金莎娱乐手机版 24

2. 创设参考线

  为了使绘制按键更便于,大家创造参照他事他说加以考察线,从标尺中拉出参照他事他说加以调查线,借使您找不到标尺,能够按Ctrl+Haval展现,如下图:

澳门金莎娱乐手机版 25

3. 制图形状

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

澳门金莎娱乐手机版 26

4. 安装形状样式

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

澳门金莎娱乐手机版 27

  然后,接收“内发光”,设置混合方式为“不奇怪”,不发光度为百分百,颜色设置为#ffffff,图素大小设置为3像素,如下图:

澳门金莎娱乐手机版 28

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

澳门金莎娱乐手机版 29

5. 增多字体

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

澳门金莎娱乐手机版 30

6. 装置字体样式

  相符的双击文字图层,张开文字图层样式,设置字体样式,点击“投影”,设置混合方式为“不荒谬”,颜色为#3e3e3e,不折射率为百分百,角度为90度,距离为1像素,大小为2像素;点击“内阴影”,设置混合格局为“不奇怪”,颜色为#454545,不折射率为陆分风度翩翩,角度为90度,间距为1像素,大小为2像素,如下图所示:

澳门金莎娱乐手机版 31

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

澳门金莎娱乐手机版 32

7. 悬停背景图

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

澳门金莎娱乐手机版 33

8.背景图属性

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

 

澳门金莎娱乐手机版 34

9. 装置字体样式

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

澳门金莎娱乐手机版 35

10. 图层半透明

  增加图层半透明效果,按上述步骤改良,鼠标悬停背景图如下,最终是再拉长后生可畏层半透明层,先增添叁个200px
X 40px的黄绿层,置顶并安装桃红层的折射率为一成,如下图:

澳门金莎娱乐手机版 36

  最后,大家完毕的CSS sprite背景图如下,您也得以点击下载PSD文件。

澳门金莎娱乐手机版 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>成分在鼠标悬停前是全透明的,鼠标经过时,慢慢不透明,以高达渐变的效率,动漫进度如下图:

澳门金莎娱乐手机版 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属性主要有:

澳门金莎娱乐手机版 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;
}

示范结果:

鼠标移入

澳门金莎娱乐手机版 40

鼠标移出

澳门金莎娱乐手机版 41

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

用三个简便的事例来注解这几个标题:

要是你的开首状态设置了体制“width”,“height”,“background”,当你在终始状态都改成了那多少个属性,那么all代表的正是“width”、“height”和“background”。假诺你的终始状态只退换了“width”和“height”时,那么all表示的就是“width”和“height”。

你可能感兴趣的随笔:

  • jQuery得到字体颜色14个人码的法子
  • 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;
}

亲自过问结果:

鼠标移入

澳门金莎娱乐手机版 42

鼠标移出

澳门金莎娱乐手机版 43

备忘小条

假如您喜欢那篇小说,你能够将它分享在Facebook,或许封存上面包车型大巴备忘小条,以便参谋。

澳门金莎娱乐手机版 44

打赏协理自个儿翻译越多好文章,感谢!

打赏译者

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

transition-timing-function属性指的是连接的“缓动函数”。首要用于钦赐浏览器的接入速度,甚至连接时期的操作举市价况,个中要包含以下两种函数:

澳门金莎娱乐手机版 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%;
}

事必躬亲结果

鼠标移入:

澳门金莎娱乐手机版 46

鼠标移出:

澳门金莎娱乐手机版 47

打赏协理本身翻译更加多好文章,谢谢!

任选大器晚成种支付办法

澳门金莎娱乐手机版 48
澳门金莎娱乐手机版 49

赞 收藏
评论

动漫片–过渡延迟时间 transition-delay

transition-delay属性transition-duration属性最为相近,区别的是transition-duration是用来安装过渡动漫的持续时间,而transition-delay首要用以钦赐多个动漫片起始举行的大运,也正是说当纠正成分属性值后多久起首试行。

有的时候候大家想改善三个或然多个css属性的transition效果时,只要把多少个transition的宣示串在风流倜傥道,用逗号(“,”卡塔尔隔绝,然后分别能够有些不相同的继续时间和其日子的速率调换情势。但必要值得注意的一些:第二个小时的值为
transition-duration,第3个为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;
}

示范结果

鼠标移入:

澳门金莎娱乐手机版 50

鼠标移出:

澳门金莎娱乐手机版 51

关于我:刘健超-J.c

澳门金莎娱乐手机版 52

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

澳门金莎娱乐手机版 53

标签:

发表评论

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

相关文章

网站地图xml地图