用css3 tranistions实现平滑过渡
来源:程序员人生 发布时间:2014-03-22 20:54:34 阅读次数:3971次
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;
}
在-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,可以看到很有趣的效果。
看看最终结果,可以看到,我们再也不必为这样一个平滑的过渡效果而去写大量的js了,期待css transition能很快得到主流浏览器的支持。
最终结果:
提示:可修改后代码再运行!
生活不易,码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠