css3之transition 

<!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:检索或设置对象延迟过渡的时间 */

请将鼠标移动到下面的矩形上：

  • 背景色过渡
  • 背景色过渡
  • 背景色过渡
  • 背景色过渡
  • 背景色过渡
posted @ 2012-02-08 19:25  jennyQ  阅读(3640)  评论(0)  编辑  收藏  举报