本篇文章主要给大家介绍关于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怎么实现图片滑动的相关知识介绍,希望对有需要的朋友有所帮助。