css如何让图片水平可以滑动,使用css怎么实现图片的滑动效果？（示例）

本篇文章主要给大家介绍关于css实现图片的滑动效果示例，希望大家阅读完本篇后对css滑动效果的相关知识有所了解。

下面给大家举一个简单的css图片滑动效果示例(自下而上滑动)：

css怎么实现图片滑动

img{

height: 200px;

width: 200px;

}

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

}

点击试试

上述代码可直接复制在本地测试效果如下图：

只要鼠标点击下面的按钮，就会出现图片自下而上的滑动效果。其中有一个onclick 属性，由元素上的鼠标点击触发，即当点击按钮时执行一段 JavaScript。

注释：onclick

属性不适用以下元素：、、
、、、、、、、

或

。

以上就是本篇文章关于css怎么实现图片滑动的相关知识介绍，希望对有需要的朋友有所帮助。