<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>transition_CSS</title>
<meta name="author" content="" />
<meta name="copyright" content="" />
<style>
h1{font-size:16px;}
.test{overflow:hidden;width:100%;margin:0;padding:0;list-style:none;}
.test li{float:left;width:100px;height:100px;margin:0 5px;border:1px solid #ddd;background-color:#eee;text-align:center;-moz-transition:background-color .5s ease-in;-webkit-transition:background-color .5s ease-in;-o-transition:background-color .5s ease-in;transition:background-color .5s ease-in;
transition:border-color .4s linear 0
}
.test li:nth-child(1):hover{background-color:#bbb;}
.test li:nth-child(2):hover{background-color:#999;}
.test li:nth-child(3):hover{background-color:#630;}
.test li:nth-child(4):hover{background-color:#090;}
.test li:nth-child(5):hover{background-color:#f00;}
</style>
</head>
<body>
/*
transition 過渡參數：
trasition-property:檢索或設置對象中的參與過渡的屬性（all,none,指定要進行過渡的CSS屬性）
transition-duration:設置對象過渡的持續時間
transition-timing-function:檢索或設置對象中過渡的動畫類型:
(linear：線性過渡。等同於貝塞爾曲線(0.0, 0.0, 1.0, 1.0)
ease：平滑過渡。等同於貝塞爾曲線(0.25, 0.1, 0.25, 1.0)
ease-in：由慢到快。等同於貝塞爾曲線(0.42, 0, 1.0, 1.0)
ease-out：由快到慢。等同於貝塞爾曲線(0, 0, 0.58, 1.0)
ease-in-out：由慢到快再到慢。等同於貝塞爾曲線(0.42, 0, 0.58, 1.0)
cubic-bezier(<number>, <number>, <number>, <number>)：特定的貝塞爾曲線類型，4個數值需在[0, 1]區間內)
transition-delay:檢索或設置對象延遲過渡的時間
*/
<h1>請將鼠標移動到下面的矩形上：</h1>
<ul class="test">
<li>背景色過渡</li>
<li>背景色過渡</li>
<li>背景色過渡</li>
<li>背景色過渡</li>
<li>背景色過渡</li>
</ul>
</body>
</html>
transition_CSS
/* transition 過渡參數： trasition-property:檢索或設置對象中的參與過渡的屬性（all,none,指定要進行過渡的CSS屬性） transition-duration:設置對象過渡的持續時間 transition-timing-function:檢索或設置對象中過渡的動畫類型: (linear：線性過渡。等同於貝塞爾曲線(0.0, 0.0, 1.0, 1.0) ease：平滑過渡。等同於貝塞爾曲線(0.25, 0.1, 0.25, 1.0) ease-in：由慢到快。等同於貝塞爾曲線(0.42, 0, 1.0, 1.0) ease-out：由快到慢。等同於貝塞爾曲線(0, 0, 0.58, 1.0) ease-in-out：由慢到快再到慢。等同於貝塞爾曲線(0.42, 0, 0.58, 1.0) cubic-bezier(,,,)：特定的貝塞爾曲線類型，4個數值需在[0, 1]區間內) transition-delay:檢索或設置對象延遲過渡的時間 */
請將鼠標移動到下面的矩形上：
- 背景色過渡
- 背景色過渡
- 背景色過渡
- 背景色過渡
- 背景色過渡