用css3 tranistions实现滑腻过渡

发布时间：2018-09-09 11:12:28 所属栏目：创业来源：站长网

导读：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

首页

2021创业做什么好？低	香港虚拟主机，香港虚
《启航当风起时》起于	域名最网站至关重要如