用css3 tranistions实现平滑过渡

发布时间：2018-09-09 14:35:12 所属栏目：经验来源：站长网

导读：副标题#e# Css tranistions允许元素的属性在单位时间内发生平滑的过渡，在阅读完《CSS Transitions Module Level 3》之后，我已经被其所吸引。尽管目前只有chrome和safari浏览器支持该属性(不过目前还得使用-webkit内核关键字作为前缀)，但相信在不久的将来

　　上面的.imageGallery li a:hover那行代码以及.imageGallery li的overflow属性，主要修复IE6下的bug。给imageGallery li定义overflow:hidden，可以看到很有趣的效果。

　　看看最终结果，可以看到，我们再也不必为这样一个平滑的过渡效果而去写大量的js了，期待css transition能很快得到主流浏览器的支持。

　　最终结果：

<!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.veryhuo.com/uploads/Common/images/liehuo_833829.jpg" /></a></li> <li class="two"><a href="#"><img src="http://www.veryhuo.com/uploads/Common/images/liehuo_838692.jpg" /></a></li> <li class="three"><a href="#"><img src="http://www.veryhuo.com/uploads/Common/images/liehuo_841542.jpg" /></a></li> <li class="five"><a href="#"><img src="http://www.veryhuo.com/uploads/Common/images/liehuo_847143.jpg" /></a></li> <li class="six"><a href="#"><img src="http://www.veryhuo.com/uploads/Common/images/liehuo_858573.jpg" /></a></li> <li class="seven"><a href="#"><img src="http://www.veryhuo.com/uploads/Common/images/liehuo_901961.jpg" /></a></li> <li class="eight"><a href="#"><img src="http://www.veryhuo.com/uploads/Common/images/liehuo_903586.jpg" /></a></li> <li class="nine"><a href="#"><img src="http://www.veryhuo.com/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.veryhuo.com/uploads/Common/images/liehuo_833829.jpg" /></a></li> <li class="two"><a href="#"><img src="http://www.veryhuo.com/uploads/Common/images/liehuo_838692.jpg" /></a></li> <li class="three"><a href="#"><img src="http://www.veryhuo.com/uploads/Common/images/liehuo_841542.jpg" /></a></li> <li class="five"><a href="#"><img src="http://www.veryhuo.com/uploads/Common/images/liehuo_847143.jpg" /></a></li> <li class="six"><a href="#"><img src="http://www.veryhuo.com/uploads/Common/images/liehuo_858573.jpg" /></a></li> <li class="seven"><a href="#"><img src="http://www.veryhuo.com/uploads/Common/images/liehuo_901961.jpg" /></a></li> <li class="eight"><a href="#"><img src="http://www.veryhuo.com/uploads/Common/images/liehuo_903586.jpg" /></a></li> <li class="nine"><a href="#"><img src="http://www.veryhuo.com/uploads/Common/images/liehuo_905897.jpg" /></a></li> </ul> <p>注：该例子所采用的图片均来自互联网。</p> </div> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：云计算网_泰州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

3/3

首页