我们为大家收集整理了关于实现divcss滑动效果的方法，以方便大家参考。

实现滑动效果

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

HTML代码

XML/HTML Code复制内容到剪贴板

CSS代码

CSS Code复制内容到剪贴板

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

}

希望大家可以学会实现divcss滑动效果的方法想了解更多精彩内容，请关注我们的网站!

相关推荐：

CSS中的层分离编程介绍