Hello！everybody！對(duì)于CSS3的應(yīng)用一直是前端的痛。因?yàn)閲鴥?nèi)瀏覽器IE、IE內(nèi)核瀏覽器市場(chǎng)份額實(shí)在是太大，對(duì)于既想優(yōu)雅的使用CSS3來實(shí)現(xiàn)復(fù)雜的頁面效果，又不得不考慮國內(nèi)的情況。苦逼的前端開發(fā)人員只能繼續(xù)使用古老的圖片來實(shí)現(xiàn)圓角、背景、漸變的效果。

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

對(duì)了！本文的一些實(shí)例是我做項(xiàng)目中運(yùn)用到的！主要針對(duì)Chrome內(nèi)核制作開發(fā)。故我很幸福哦….而且很是興奮興奮滴說！

CSS3 Transition的應(yīng)用

語法：

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

取值：

[ transition-property ]：檢索或設(shè)置對(duì)象中的參與過渡的屬性

[ transition-duration ]：檢索或設(shè)置對(duì)象過渡的持續(xù)時(shí)間

[ transition-timing-function ]：檢索或設(shè)置對(duì)象中過渡的動(dòng)畫類型

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

復(fù)合屬性。檢索或設(shè)置對(duì)象變換時(shí)的過渡。

PS:摘自CSS參考手冊(cè)

想更多的了解，去看手冊(cè)吧！這是最好學(xué)習(xí)的地方哦！

好啦~我們來看個(gè)運(yùn)用實(shí)例吧！

首先，看到這個(gè)設(shè)計(jì)圖稿時(shí)，可能一些人，這個(gè)有什么地方可用到transition？童鞋！看到那個(gè)紅框向上的箭頭么？這個(gè)是要有交互效果滴！

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

嗯，現(xiàn)在看代碼了哦~！

這是結(jié)構(gòu)代碼

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;/*針對(duì)webkit內(nèi)核CSS3的的私有屬性,chorme在transition上還屬于實(shí)驗(yàn)性。*/}.ext-block:hover { margin-top:-95px; }

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

這兩句就能實(shí)現(xiàn)鼠標(biāo)滑入時(shí)，圖片上滑，然后顯示其他的。這個(gè)省了好多js吧！哈哈！可能有些人說：語法是四個(gè)參數(shù)，為什么你就寫了三個(gè)？這個(gè)…看手冊(cè)吧！

標(biāo)簽： CSS3 CSS3教程 CSS3.0 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。