您當(dāng)前位置：首頁(yè) > web前端 > htmlcss > 用css3 tranistions實(shí)現(xiàn)平滑過(guò)渡

用css3 tranistions實(shí)現(xiàn)平滑過(guò)渡

來(lái)源：程序員人生發(fā)布時(shí)間：2014-03-22 20:54:34 閱讀次數(shù)：4195次

　　Css tranistions允許元素的屬性在單位時(shí)間內(nèi)發(fā)生平滑的過(guò)渡，在閱讀完《CSS Transitions Module Level 3》之后，我已經(jīng)被其所吸引。盡管目前只有chrome和safari瀏覽器支持該屬性(不過(guò)目前還得使用-webkit內(nèi)核關(guān)鍵字作為前綴)，但相信在不久的將來(lái)，各主流瀏覽器會(huì)全面支持該屬性。

　　通常情況下，當(dāng)css屬性發(fā)生改變時(shí)，元素會(huì)立刻發(fā)生改變。Css　transtions提供一種方法使得元素從原始狀態(tài)平滑的過(guò)渡到新的狀態(tài)。只需要對(duì)元素定義要使用transition效果的屬性(transition-property)、transition效果的過(guò)渡時(shí)間(transition-duration)、transition效果的過(guò)渡方式(transition-timing-function)以及transition效果何時(shí)開(kāi)始(transition-delay)。在詳細(xì)了解這些屬性之后，我作了一個(gè)簡(jiǎn)單的測(cè)試(如下)，雖說(shuō)簡(jiǎn)單，但總能鼓動(dòng)人心。

　　我只是定義一個(gè)絕對(duì)居中的盒子，在鼠標(biāo)滑過(guò)時(shí)將其放大，在chrome中我們會(huì)看到平滑的過(guò)渡效果。Css規(guī)則如下：

.transition{
opacity:0.2;
position:absolute;
left:-65px;
top:-65px;
left:50%;
top:50%;
border:1px solid #000;
background-color:#f00;
padding:30px;
width:100px;
height:100px;
-webkit-transition-property:opacity,width,height,margin-left,margin-top,padding,border-width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:ease-in-out;
}
.transition:hover{
width:300px;height:300px;border-width:3px;margin-top:-195px;margin-left:-195px;opacity:1;padding:90px;
}

　　在-webkit-transition-property定義了使用過(guò)渡效果的屬性，-webkit-transition-duration定義過(guò)渡持續(xù)的時(shí)間，這里我定義的1s。W3c的規(guī)則中說(shuō)明，當(dāng)把-webkit-transition-duration的屬性值定義為0時(shí)，將不會(huì)出現(xiàn)平滑的過(guò)渡。-webkit-transition-timing-function定義了過(guò)渡的方式，這里是ease-in-out，關(guān)于其它方式，可以參看文檔說(shuō)明。有了這樣一個(gè)屬性之后，用戶可以得到良好的體驗(yàn)，我們也不必要在為實(shí)現(xiàn)這樣的平滑的效果而去寫(xiě)大量的js。下面我構(gòu)建一個(gè)Image gallery，來(lái)看看該屬性所帶來(lái)的用戶體驗(yàn)。

　　如何排列圖片，我不贅述。熟悉css的人都很清楚怎么做，我只介紹實(shí)現(xiàn)transition效果的核心css代碼。

.imageGallery li{display:block;width:200px;height:136px;margin:15px;float:left;_overflow:hidden;}
.imageGallery li img{
width:200px;
height:136px;
border:1px solid #000;
position:relative;
z-index:1000;
-webkit-transition-property:width,height,margin-left,margin-top,border,left,top,z-index;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:ease-in-out;
.}
.imageGallery li a:hover{_background-color:#fff;_z-index:5000;_position:relative;}
.imageGallery li a:hover img{
border:2px solid #000;
width:600px;
height:408px;
margin-left:-301px;
margin-top:-255px;
left:50%;
top:50%;
z-index:5000;
}

.imageGallery li{display:block;width:200px;height:136px;margin:15px;float:left;_overflow:hidden;}
.imageGallery li img{
width:200px;
height:136px;
border:1px solid #000;
position:relative;
z-index:1000;
-webkit-transition-property:width,height,margin-left,margin-top,border,left,top,z-index;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:ease-in-out;
}
.imageGallery li a:hover{_background-color:#fff;_z-index:5000;_position:relative;}
.imageGallery li a:hover img{
border:2px solid #000;
width:600px;
height:408px;
margin-left:-301px;
margin-top:-255px;
left:50%;
top:50%;
z-index:5000;
}

　　上面的.imageGallery li a:hover那行代碼以及.imageGallery li的overflow屬性，主要修復(fù)IE6下的bug。給imageGallery li定義overflow:hidden，可以看到很有趣的效果。

　　看看最終結(jié)果，可以看到，我們?cè)僖膊槐貫檫@樣一個(gè)平滑的過(guò)渡效果而去寫(xiě)大量的js了，期待css transition能很快得到主流瀏覽器的支持。

　　最終結(jié)果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=GBK" /><title>transitions - image gallery - Liehuo.net</title><style>body{text-align:center;}.container{ margin:0 auto;width:960px;text-align:left;}.imageGallery{ list-style:none;padding:0;margin:0;float:left;}.imageGallery li{display:block;width:200px;height:136px;margin:15px;float:left;_overflow:hidden;}.imageGallery li img{width:200px;height:136px;border:1px solid #000;position:relative;z-index:1000;-webkit-transition-property:width,height,margin-left,margin-top,border,left,top,z-index;-webkit-transition-duration:1s;-webkit-transition-timing-function:ease-in-out;}.hidden li{overflow:hidden;}.imageGallery li a:hover{_background-color:#fff;_z-index:5000;_position:relative;}.imageGallery li a:hover img{border:2px solid #000;width:600px;height:408px;margin-left:-301px;margin-top:-255px;left:50%;top:50%;z-index:5000;}</style></head><body><div class="container"><h1>Transitions Image Gallery</h1><ul class="imageGallery"><li class="one"><a href="#"><img src="http://www.vxbq.cn/uploads/Common/images/liehuo_833829.jpg" /></a></li><li class="two"><a href="#"><img src="http://www.vxbq.cn/uploads/Common/images/liehuo_838692.jpg" /></a></li><li class="three"><a href="#"><img src="http://www.vxbq.cn/uploads/Common/images/liehuo_841542.jpg" /></a></li><li class="five"><a href="#"><img src="http://www.vxbq.cn/uploads/Common/images/liehuo_847143.jpg" /></a></li><li class="six"><a href="#"><img src="http://www.vxbq.cn/uploads/Common/images/liehuo_858573.jpg" /></a></li><li class="seven"><a href="#"><img src="http://www.vxbq.cn/uploads/Common/images/liehuo_901961.jpg" /></a></li><li class="eight"><a href="#"><img src="http://www.vxbq.cn/uploads/Common/images/liehuo_903586.jpg" /></a></li><li class="nine"><a href="#"><img src="http://www.vxbq.cn/uploads/Common/images/liehuo_905897.jpg" /></a></li></ul><h3>給.imageGallery li定義overflow:hidden屬性之后</h3><ul class="imageGallery hidden"><li class="one"><a href="#"><img src="http://www.vxbq.cn/uploads/Common/images/liehuo_833829.jpg" /></a></li><li class="two"><a href="#"><img src="http://www.vxbq.cn/uploads/Common/images/liehuo_838692.jpg" /></a></li><li class="three"><a href="#"><img src="http://www.vxbq.cn/uploads/Common/images/liehuo_841542.jpg" /></a></li><li class="five"><a href="#"><img src="http://www.vxbq.cn/uploads/Common/images/liehuo_847143.jpg" /></a></li><li class="six"><a href="#"><img src="http://www.vxbq.cn/uploads/Common/images/liehuo_858573.jpg" /></a></li><li class="seven"><a href="#"><img src="http://www.vxbq.cn/uploads/Common/images/liehuo_901961.jpg" /></a></li><li class="eight"><a href="#"><img src="http://www.vxbq.cn/uploads/Common/images/liehuo_903586.jpg" /></a></li><li class="nine"><a href="#"><img src="http://www.vxbq.cn/uploads/Common/images/liehuo_905897.jpg" /></a></li></ul><p>注：該例子所采用的圖片均來(lái)自互聯(lián)網(wǎng)。</p></div></body></html><br /><center>如不能顯示效果，請(qǐng)按Ctrl+F5刷新本頁(yè)，更多網(wǎng)頁(yè)代碼：<a href='http://www.vxbq.cn/' target='_blank'>http://www.vxbq.cn/</a></center>
提示：可修改后代碼再運(yùn)行!

生活不易，碼農(nóng)辛苦
如果您覺(jué)得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)
程序員人生

------分隔線----------------------------

上一篇 勸告中小網(wǎng)站站長(zhǎng)：推介廣告還是不做為好

下一篇 Access數(shù)據(jù)庫(kù)技術(shù)（63)

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關(guān)注

欄目熱點(diǎn)

多多色-多人伦交性欧美在线观看-多人伦精品一区二区三区视频-多色视频-免费黄色视屏网站-免费黄色在线

用css3 tranistions實(shí)現(xiàn)平滑過(guò)渡