用css3-tranistions实现平滑过渡
来源:Denis Blog 发布时间:2009-12-23 19:24:00
Css tranistions允许元素的属性在单位时间内发生平滑的过渡,在阅读完《CSS Transitions Module Level 3》之后,我已经被其所吸引。尽管目前只有chrome和safari浏览器支持该属性(不过目前还得使用-webkit内核关键字作为前缀),但相信在不久的将来,各主流浏览器会全面支持该属性。
通常情况下,当css属性发生改变时,元素会立刻发生改变。Css transtions提供一种方法使得元素从原始状态平滑的过渡到新的状态。只需要对元素定义要使用transition效果的属性(transition-property)、transition效果的过渡时间(transition-duration)、transition效果的过渡方式(transition-timing-function)以及transition效果何时开始(transition-delay)。在详细了解这些属性之后,我作了一个简单的测试,虽说简单,但总能鼓动人心。
我只是定义一个绝对居中的盒子,在鼠标滑过时将其放大,在chrome中我们会看到平滑的过渡效果。Css规则如下:
.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定义了使用过渡效果的属性,-webkit-transition-duration定义过渡持续的时间,这里我定义的1s。W3c的规则中说明,当把-webkit-transition-duration的属性值定义为0时,将不会出现平滑的过渡。-webkit-transition-timing-function定义了过渡的方式,这里是ease-in-out,关于其它方式,可以参看文档说明。有了这样一个属性之后,用户可以得到良好的体验,我们也不必要在为实现这样的平滑的效果而去写大量的js。下面我构建一个Image gallery,来看看该属性所带来的用户体验。
如何排列图片,我不赘述。熟悉css的人都很清楚怎么做,我只介绍实现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 a:hover那行代码以及.imageGallery li的overflow属性,主要修复IE6下的bug。给imageGallery li定义overflow:hidden,可以看到很有趣的效果。
看看最终结果transitions-image-gallery.htm ,可以看到,我们再也不必为这样一个平滑的过渡效果而去写大量的js了,期待css transition能很快得到主流浏览器的支持。
猜你喜欢
- mssql的每个varchar、text字段都被自动插入一段js代码,即使删除这段代码,如果没有从源头上解决,几分钟后,js代码就又会自动插
- 一个单步的动作,用了这个脚本,就可以重复执行100遍1000遍。上面就是一个路径描边100遍的效果,吼吼~ 不知道大家明白用处没有?(以前老
- 代码如下:Function htmll(mulu,htmlmulu,FileName,filefrom,htmla,htmlb,h
- 在Soundbreak我们每天24小时不间断地播放实况音频和视频,所以对于MySQL的新增的复制特性,我们不能做出很令人信服的测试。通过测试
- 1、图片防盗链在一些大型网站中,比如百度贴吧,该站点的图片采用了防盗链的规则,以至于使用下面代码会发生错误。简单代码:<!DOCTYP
- asp按关键字查询XML的问题 '-------------------------------------------------
- 作用:可以清空此文件所在的web站点所有文件,将文件内容清零.运行完毕所有文件大小都变成0字节.此代码本人原创,转载请注明转自本站,谢谢合作
- 过滤html代码的函数,当然也可以使用正则表达式。<%Function FilterHTML(strToFilter)&nb
- 判断服务器是否安装了某种asp组件,比较常用的代码如下:代码如下:<% '功能:检查是否存在系统组件或组件是否安装成功
- 介绍:SQL Server 2008变更数据捕获SQL Server 2008的CDC函数读取激活了CDC的每个表所关联的事务日志来记录系统
- 1.建立Recordset对象Dim objMyRstSet objMyRst=Server.CreateObject(&ldquo
- 漂亮的代码是漂亮网站的基础,优秀的 CSS 只存在与同样优秀的 HTML 之上,干净的,语义的 HTML 代码让一个网站更健壮。本文讲述了1
- 代码如下:<html> <head> &nb
- 本例详细介绍了如何在wiondws XP下安装与配置MySQL5.0.37 ,图文并茂,相信对初学mysql的朋友有所帮助。1 点击MySQ
- 判断函数如下:Public Function CheckBIG(strSource As String) As BooleanDim idx
- 如果你是一位ASP爱好者,你一定想过ASP的执行效率如何?大家都知道ASP效率和CGI的比,在访问量少的时候,它们是不相上下的,有时可能CG
- jQuery中文入门指南,翻译加实例,jQuery的起点教程中文版译者:Keel此文以实例为基础一步步说明了jQuery的工作方式。现以中文
- 用SQLyog来分析MySQL数据库:SOLyog的下载、安装以及使用很简单。我去了相关网站下载,它只有384K字节大小。它把两个文件(一个
- 以发布目录为例:<OBJECT ID="agobjOraSession" RUNAT=&quo
- 转发时请保留此声明信息,这段声明不并会影响你的速度! @author: