css3实现元素的伸缩效果代码实例_html/css_WEB-ITnose

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

          蚂蚁部落   .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;   }               window.onload = function () {  var obt = document.getElementById("bt");  var odiv = document.getElementById("slider");  obt.click = function () {    odiv.classList.toggle('closed');  }}   


      
查看更多关于css3实现元素的伸缩效果代码实例_html/css_WEB-ITnose的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did110979