你的位置:首页 > 网页设计

[网页设计]css3实现元素的伸缩效果代码实例


css3实现元素的伸缩效果代码实例:
本章节分享一段代码实例,它利用css3实现了元素的伸缩效果。
这里为了进行演示,结合了javascript代码。
代码实例如下:

<!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内核浏览器:Safari and Chrome*/  -webkit-transition-property: all;   -webkit-transition-duration: .5s;   -webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);   /* Mozilla内核浏览器:firefox3.5+*/  -moz-transition-property: all;   -moz-transition-duration: .5s;   -moz-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);   /* Opera*/  -o-transition-property: all;   -o-transition-duration: .5s;   -o-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);   /* IE9*/  -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/