HTML5+CSS3  Transitions功能
在CSS 3中，可以使用Transitions功能将标签中某个属性的属性值，在指定的时间内平滑过渡到另一个属性值。为实现该动画功能，可以使用transition属性，使用方法如下：
Transition:property duration timing-function
在上述代码中，property表示对那个属性值进行平滑过渡，duration表示在多长时间内完成属性值的平滑过渡，timing-function表示通过什么方法进行平滑过渡。
示例：18-1  Transitions.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Transitions功能应用</title>transition用法搭配
<style>
div {
    margin-left:10px;
    margin-top:10px;
    width:220px;
    height:25px;
    padding:10px;
    font-size:18px;
}
div.div1 {
    background-color: #ff0;
    -webkit-transition: background-color 1s ease;
   
-moz-transition: background-color 1s ease;
    -o-transition: background-color 1s ease;
}
div.div1:hover {
    background-color: #0ff;
}
</style>
</head>
<body>
<div class="div1">鼠标指向时，改变背景颜</div>
</body>
</html>
在上述代码中，当鼠标未指向div1层时，div1层的背景颜为#ff0。当鼠标指向div1层时，使用transition属性设置在1秒中过渡背景颜为#0ff。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。