css3实现元素的伸缩效果代码实例:
本章节分享一段代码实例,它利用css3实现了元素的伸缩效果。
这里为了进行演示,结合了javascript代码。
代码实例如下:
1 | <!DOCTYPE html><html> <head> <meta charset= " utf-8" > <meta name= "author" content= "http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style>.slider{ overflow-y:hidden; max-height:500px; background:pink; height:200px; width:200px; -webkit-transition-property: all; -webkit-transition-duration: .5s; -webkit-transition-timing- function : cubic-bezier(0, 1, 0.5, 1); -moz-transition-property: all; -moz-transition-duration: .5s; -moz-transition-timing- function : cubic-bezier(0, 1, 0.5, 1); -o-transition-property: all; -o-transition-duration: .5s; -o-transition-timing- function : cubic-bezier(0, 1, 0.5, 1); -ms-transition-property: all; -ms-transition-duration: .5s; -ms-transition-timing- function : cubic-bezier(0, 1, 0.5, 1); } .slider.closed{ max-height:0; } </style><script>window.onload = function () { var obt = document.getElementById( "bt" ); var odiv = document.getElementById( "slider" ); obt.click = function () { odiv.classList.toggle( 'closed' ); }}</script></head><body><div class = "slider" id= "slider" ></div> <button id= "bt" >查看效果</button> </body></html>
|
로그인 후 복사
上面的代码实现了我们的要求,这里不多介绍了,更多内容可以参阅相关阅读。
相关阅读:
(1).css3的transition属性可以参阅CSS3的transition属性详解一章节。
(2).classList可以参阅HTML5的classList属性用法介绍一章节。
(3).toggle()可以参阅HTML5的classList集合添加新class的toggle()方法一章节。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=18339
更多内容可以参阅:http://www.softwhy.com/divcss/