CSS3實(shí)現(xiàn)偽類hover離開時(shí)平滑過(guò)渡效果

這里我們要使用 transition 標(biāo)簽

• 原文來(lái)源：詳情

效果預(yù)覽

請(qǐng)把鼠標(biāo)指針移動(dòng)到藍(lán)色的 div 元素上，就可以看到過(guò)渡效果。

注釋：本例在低版本 Internet Explorer 中無(wú)效。

方法介紹

transition:顏色 變換延續(xù)的時(shí)間 變換速率

transition:background-color 0.3s linear

變換速率：

1、ease：（逐漸變慢）默認(rèn)值，ease函數(shù)等同于貝塞爾曲線(0.25, 0.1, 0.25, 1.0).

2、linear：（勻速），linear 函數(shù)等同于貝塞爾曲線(0.0, 0.0, 1.0, 1.0).

3、ease-in：(加速)，ease-in 函數(shù)等同于貝塞爾曲線(0.42, 0, 1.0, 1.0).

4、ease-out：（減速），ease-out 函數(shù)等同于貝塞爾曲線(0, 0, 0.58, 1.0).

5、ease-in-out：（加速然后減速），ease-in-out 函數(shù)等同于貝塞爾曲線(0.42, 0, 0.58, 1.0)

6、cubic-bezier：（該值允許你去自定義一個(gè)時(shí)間曲線）， 特定的cubic-bezier曲線。 (x1, y1, x2, y2)四個(gè)值特定于曲線上點(diǎn)P1和點(diǎn)P2。所有值需在[0, 1]區(qū)域內(nèi)，否則無(wú)效。

<!-- wp:paragraph -->
<p>//Mozilla內(nèi)核</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>-moz-transition ：</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>//Webkit內(nèi)核</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>-webkit-transition ：</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>//Opera</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>-o-transition ：</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>//W3C 標(biāo)準(zhǔn)</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>transition ：</p>
<!-- /wp:paragraph -->

下面實(shí)例，演示，鼠標(biāo)經(jīng)過(guò)時(shí)，改變div寬度，平滑改變，帶動(dòng)畫

CSS:

	.n-box
 {
	width:100px;
	height:100px;
	background:blue;/*背景顏色*/
	transition:width 2s;/*動(dòng)畫*/
	-moz-transition:width 2s; /* Firefox 4 */
	-webkit-transition:width 2s; /* Safari and Chrome */
	-o-transition:width 2s; /* Opera */
	}

	.n-box:hover/*觸發(fā)*/
 {
	width:300px;
	}

HTML：

<div class="n-box">div>

<p>請(qǐng)把鼠標(biāo)指針移動(dòng)到藍(lán)色的 div 元素上，就可以看到過(guò)渡效果。p>

<p><b>注釋：b>本例在低版本 Internet Explorer 中無(wú)效。p>

相關(guān)補(bǔ)充

• 原文來(lái)源：詳情

transition有一個(gè)特性，只要是帶有數(shù)值類型的屬性（例如：% , rgba() , rgb() , hsla() , 數(shù)字等），在其發(fā)生變化的時(shí)候，均會(huì)被觸發(fā)動(dòng)畫效果。

因此，不管:hover偽類什么時(shí)候丟掉我的動(dòng)畫，也不管我:hover時(shí)，元素動(dòng)畫走到了什么地步。只要元素本身帶有transitioin，該動(dòng)畫便會(huì)從當(dāng)前動(dòng)畫執(zhí)行到的地方，以相同的時(shí)間返回原樣。

這只是最簡(jiǎn)單的動(dòng)畫實(shí)現(xiàn)，但對(duì)于目前大部分需求來(lái)說(shuō)，配合配合貝塞爾曲線，已經(jīng)足夠用了。

你僅僅需要做到，hover中的最終樣式，保證為數(shù)值樣式變OK了。

像display:block變?yōu)閐isplay:none就不好使了，此時(shí)我們可以用visibilty:1變?yōu)関isibilty:0，同樣也可以簡(jiǎn)單實(shí)現(xiàn)顯示到隱藏的效果。

另外加一句，不太清楚transition屬性的可以自行去百度去，transition-timing-function屬性定義的速度曲線，使用cubic-bezier貝塞爾曲線，可以做到很多效果，大家可以上這個(gè)網(wǎng)址去試一試貝塞爾曲線實(shí)現(xiàn)的動(dòng)畫。

相關(guān)推薦

hover選擇器設(shè)置其它元素 - CSS筆記

Muze

• 20年9月3日
• 喜歡：0
• 瀏覽：497

簡(jiǎn)書導(dǎo)航小工具區(qū)塊 - WordPress區(qū)塊

Muze

• 20年9月3日
• 喜歡：0
• 瀏覽：638