css3 hover平滑過渡效果，滑鼠經過元素，背景漸隱漸現效果

標籤：intern   -o   css   無效   移動   text   and   color   net   

下面執行個體，示範，滑鼠經過時，改變div寬度，平滑改變，帶動畫

div{width:100px;height:100px;background:blue;transition:width 2s;-moz-transition:width 2s; /* Firefox 4 */-webkit-transition:width 2s; /* Safari and Chrome */-o-transition:width 2s; /* Opera */}div:hover{width:300px;}

 

<div></div><p>請把滑鼠指標移動到藍色的 div 元素上，就可以看到過渡效果。</p><p><b>注釋：</b>本例在低版本 Internet Explorer 中無效。</p>

 

 

 

transition:顏色 變換延續的時間 變換速率

transition:background-color 0.3s linear

變換速率：

1、ease：（逐漸層慢）預設值，ease函數等同於貝茲路徑(0.25, 0.1, 0.25, 1.0).

2、linear：（勻速），linear 函數等同於貝茲路徑(0.0, 0.0, 1.0, 1.0).

3、ease-in：(加速)，ease-in 函數等同於貝茲路徑(0.42, 0, 1.0, 1.0).

4、ease-out：（減速），ease-out 函數等同於貝茲路徑(0, 0, 0.58, 1.0).

5、ease-in-out：（加速然後減速），ease-in-out 函數等同於貝茲路徑(0.42, 0, 0.58, 1.0)

6、cubic-bezier：（該值允許你去自訂一個時間曲線）， 特定的cubic-bezier曲線。 (x1, y1, x2, y2)四個值特定於曲線上點P1和點P2。所有值需在[0, 1]地區內，否則無效。

//Mozilla核心

-moz-transition ：

//Webkit核心

-webkit-transition ：

//Opera

-o-transition ：

//W3C 標準

transition ：

css3 hover平滑過渡效果，滑鼠經過元素，背景漸隱漸現效果