CSS3基础学习CSS3的transition属性实现过渡效果

学习CSS3的transition属性实现过渡效果

CSS3可以实现当元素从一种样式变换为另一种样式时添加过渡效果,过渡属性是以transition来定义,一般定义transition属性需要定义两项内容,分别是“想要增加过渡效果的属性”和效果的时长,下面举例说明:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3测试</title>
<style type="text/css">
div {
 margin:30px;padding:20px;
 width:300px;height:100px;
 background:#4DC299;
 color:#fff;
 transition:width 2s;
}
div:hover {width:350px;}
</style>
</head>
<body>
<div>ABCDEFG</div>
</body>
</html>

浏览这个网页,将鼠标放在div框上面的时候,它的宽度由300px变成350px,因为定义了针对width的过渡效果,所以宽度改变这个过程是渐近的,请将鼠标放在下面的div框上体验这种过渡效果。

ABCDEFG

上例中的过渡时长为2秒,如果这个时长设置为0的话,则不会有过渡效果,效果开始于指定的CSS属性发生改变时,例如鼠标指向的时候产生的颜色或形状的改变。

如需向多个CSS属性添加过渡效果,可添加多个属性,之间由逗号隔开,比如说可以同时给宽度和背景颜色增加效果,例如:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3测试</title>
<style type="text/css">
div {
 margin:30px;padding:20px;
 width:300px;height:100px;
 background:#4DC299;
 color:#fff;
 transition:width 2s,background 2s;
}
div:hover {width:350px;background:#FF8B48;}
</style>
</head>
<body>
<div>No pain, no gain</div>
</body>
</html>

浏览这个网页,将鼠标放在div框上面的时候,我们发现宽度改变的同时,背景颜色也逐渐改变了,请将鼠标指向下面的div框体验这种效果:

ABCDEFG

过渡属性transition是一个简写属性,它包含四个属性,分别是:

transition-property 规定设置过渡效果的CSS属性的名称,如设置为all,则应用于所有属性。

transition-duration 规定完成过渡效果需要多少秒或毫秒。

transition-timing-function 规定过渡效果的速度曲线。

transition-delay 定义过渡效果何时开始,例如设置为3s,则表示等待3秒后才开始有过渡效果。

也就是说,过渡简写属性的完整写法是:

选择器 {transition: property duration timing-function delay}

关于过渡效果的速度曲线,有以下几种定义:

cubic-bezier(n,n,n,n) 自定义值,可能的值是0至1之间的数值

linear 规定以相同速度开始至结束的过渡效果相当于cubic-bezier(0,0,1,1)

ease 规定慢速开始,然后变快,然后慢速结束的过渡效果,相当于cubic-bezier(0.25,0.1,0.25,1),这个是过渡效果的默认值。

ease-in 规定以慢速开始的过渡效果,相当于 cubic-bezier(0.42,0,1,1)

ease-out 规定以慢速结束的过渡效果,相当于cubic-bezier(0,0,0.58,1)

ease-in-out 规定以慢速开始和结束的过渡效果,相当于cubic-bezier(0.42,0,0.58,1)

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.sz-kmd.com.cn/css3/31.html