纯CSS实现滑动效果（Slide Up & Slide Down）

来源：互联网发布：淘宝企业店铺的条件编辑：程序博客网时间：2024/05/16 15:08

只需要一个DIV元素便可实现滑动效果，避免了使用JavaScript为元素的动画（IE浏览器下仅支持IE9以上）

HTML代码

  <div style="height: 200px; width: 200px; border: 1px solid #ccc;">        <div class="slider" id="slider">这里是内容</div>    </div>    <button onclick="document.getElementById('slider').classList.toggle('closed');">点击看看</button>

CSS代码

 .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; }

demo演示地址:http://www.w3cways.com/example?pid=1166

阅读全文

0 0