01
transition属性
1
transition属性的使用
transition是CSS3中新增加的一个属性，它的功能是元素在不同状态之间切换时，定义不同的过渡动画效果，如渐显、渐弱、动画快慢，它是一个简写的属性，分开编写之后，它包含对应的四个属性，它们的名称和功能说明如下表19.1所示：
表19.1 transition属性的功能说明
接下来通过一个简单实例来演示transitions属性的使用。
实例19-1 transition属性的使用
●
功能描述
在新创建的HTML页面中，添加一个div元素，并实现圆形的球状，当鼠标移动到元素上时，使用transition属性，以过渡动画的效果改变元素的背景色。
●
实现代码
在WebStorm开发工具中，新建一个名称为“19-1”的HTML页面，并加入代码，如代码清单19-1所示。
代码清单19-1 transition属性的使用
<!DOCTYPE html>
< html>
< headlang="en">
< metacharset="UTF-8">
< title> transition属性的使用 </ title>
< styletype="text/css">
div{
Width＜/span>: 70px;
Height＜/span>: 70px;
line-Height＜/span>: 70px;
text-align: center;
font-size: 30px;
box-shadow: 0px5px10px#ccc;
border: solid 3px#666;
border-radius: 50%;
background-color: #eee;
transition: background-color 5slinear 2s;
}
div:hover{
background-color: #ccc;
}
</ style>
</ head>
< body>
< div> 球 </ div>
</ body>
</ html>
●
页面效果
该页面在Chrome浏览器中执行的页面效果如图19-1所示：
▍图19-1 transition属性的使用
●
源码分析
在上述实例代码清单的样式表中，球状元素在鼠标移到元素上之前的背景色是灰白色的，当鼠标称动元素上后，背景色以动画的形式渐变为深色，这种效果的实现，是由于元素添加了transition属性，并指定在background-color样式变化时应用。
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jquery