<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 背景色变化</title>
<style>
div {
width:600px;
height:40px;
border:2px solid #000;
padding:6px;
font-size:18px;
background:#b9f7b4;
margin:3px auto;
}
.t1{
-moz-transition:background-color 4s linear;
-webkit-transition:background-color 4s linear;
-o-transition:background-color 4s linear;
}
.t1:hover {
background:#808080;
}
.t2 {
-moz-transition:background-color 4s ease;
-webkit-transition:background-color 4s ease;
-o-transition:background-color 4s ease;
}
.t2:hover {
background:#ffd800;
}
.t3 {
-moz-transition:background-color 4s ease-in;
-webkit-transition:background-color 4s ease-in;
-o-transition:background-color 4s ease-in;
}
.t3:hover {
background:#ffd800;
}
.t4 {
-moz-transition:background-color 4s ease-out;
-webkit-transition:background-color 4s ease-out;
-o-transition:background-color 4s ease-out;
}
.t4:hover {
background:#ffd800;
}
.t5 {
-moz-transition:background-color 4s ease-in-out;
-webkit-transition:background-color 4s ease-in-out;
-o-transition:background-color 4s ease-in-out;
}
.t5:hover {
background:#ffd800;
}
.t6 {
-moz-transition:background-color 4s ease;
-webkit-transition:background-color 4s ease;
-o-transition:background-color 4s ease;
-moz-transition:width 4s ease;
-webkit-transition:width 4s ease;
-o-transition:width 4s ease;
}
.t6:hover {
width:200px;
background:#ffd800;
}
</style>
</head>
<body>
<p style="width:600px; margin:0 auto; font-size:24px; font-weight:bold">
1 transition-property:指定对HTML元素的那个CSS属性进行平滑渐变处理。
该属性可以指定background-color、width、height等各种标准的CSS属性<br />
2 transition-duration:指定属性平滑渐变的持续时间<br />
3 transition-time-function:指定渐变的速度
</p>
<p style="width:600px; height:40px; color:#f00; margin:0 auto; font-size:24px; font-weight:bold">鼠标移上来会发生颜色渐变</p>
<div class="t1">linear:线性速度。动画开始的速度到结束的速度保持不变</div>
<div class="t2">ease:动画开始时较慢，然后速度加快，到达最大的速度之后再减速</div>
<div class="t3">ease-in:动画开始时速度较慢，然后速度加快</div>
<div class="t4">ease-out:动画开始时很快，然后速度减速</div>
<div class="t5">ease-in-out:动画开始时较慢，然后速度加快，到达最大速度时再减慢速度</div>
<div class="t6">宽度由600px变为200px；背景由浅蓝变为黄色；ease</div>
</body>
</html>