實現divcss滑動效果的方法介紹

我們為大家收集整理了關於實現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中的層分離編程介紹