Hello！everybody！對于CSS3的應用一直是前端的痛。因為(wèi)國內(nèi)浏覽器(qì)IE、IE內(nèi)核浏覽器(qì)市場(chǎng)份額實在是太大(dà)，對于既想優雅的使用CSS3來(lái)實現複雜的頁面效果，又不得(de)不考慮國內(nèi)的情況。苦逼的前端開(kāi)發人(rén)員隻能繼續使用古老的圖片來(lái)實現圓角、背景、漸變的效果。

如果你(nǐ)是一個(gè)具有(yǒu)探索性的前端攻城師(shī)，那(nà)麽就用CSS3來(lái)實現吧(ba)！既能鍛煉CSS3新的屬性，同時(shí)對自己的技(jì)術(shù)不斷提高(gāo)，幫助CSS3應用的推廣；也能夠實現IE系列的兼容。不過這個(gè)過程很(hěn)痛苦。你(nǐ)得(de)和(hé)PM一頓解釋為(wèi)什麽這樣實現，又得(de)折騰更多(duō)的代碼！這太苦逼了！可(kě)是我們是一群經得(de)起的前端攻城師(shī)！！ 哈哈~！

對了！本文的一些(xiē)實例是我做(zuò)項目中運用到的！主要針對Chrome內(nèi)核制(zhì)作(zuò)開(kāi)發。故我很(hěn)幸福哦….而且很(hěn)是興奮興奮滴說！

CSS3 Transition的應用

語法：

transition：[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]。

取值：

[ transition-property ]：檢索或設置對象中的參與過渡的屬性

[ transition-duration ]：檢索或設置對象過渡的持續時(shí)間(jiān)

[ transition-timing-function ]：檢索或設置對象中過渡的動畫(huà)類型

[ transition-delay ]：檢索或設置對象延遲過渡的時(shí)間(jiān)

複合屬性。檢索或設置對象變換時(shí)的過渡。

PS:摘自CSS參考手冊

想更多(duō)的了解，去看手冊吧(ba)！這是最好學習的地方哦！

好啦~我們來(lái)看個(gè)運用實例吧(ba)！

首先，看到這個(gè)設計(jì)圖稿時(shí)，可(kě)能一些(xiē)人(rén)，這個(gè)有(yǒu)什麽地方可(kě)用到transition？童鞋！看到那(nà)個(gè)紅框向上(shàng)的箭頭麽？這個(gè)是要有(yǒu)交互效果滴！

即:滑進時(shí)，圖片向上(shàng)走，顯示右邊圖片的所展示的部分。

嗯，現在看代碼了哦~！

這是結構代碼

CSS3主要代碼：

.ext-block { position:relative; top:0; margin-top:0; transition:0.2s linear 0.2s; -webkit-transition:margin-top 0.25s ease-in-out 0.1s;/*針對webkit內(nèi)核CSS3的的私有(yǒu)屬性,chorme在transition上(shàng)還(hái)屬于實驗性。*/}.ext-block:hover { margin-top:-95px; }

其中觸發的動作(zuò)就是.ext-block:hover { top:-95px;}

這兩句就能實現鼠标滑入時(shí)，圖片上(shàng)滑，然後顯示其他的。這個(gè)省了好多(duō)js吧(ba)！哈哈！可(kě)能有(yǒu)些(xiē)人(rén)說：語法是四個(gè)參數(shù)，為(wèi)什麽你(nǐ)就寫了三個(gè)？這個(gè)…看手冊吧(ba)！