时间：2021-07-01 10:21:17 帮助过：173人阅读
下面给大家举一个简单的css图片滑动效果示例（自下而上滑动）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css怎么实现图片滑动</title>
<style type="text/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;
}
</style>
</head>
<body>
<div style="height: 200px; width: 200px; border: 1px solid #ccc;">
<div class="slider" id="slider">
<img src="2.png">
</div>
</div>
<button onclick="document.getElementById('slider').classList.toggle('closed');">点击试试</button>
</body>
<html>上述代码可直接复制在本地测试效果如下图：
只要鼠标点击下面的按钮，就会出现图片自下而上的滑动效果。其中有一个onclick 属性，由元素上的鼠标点击触发，即当点击按钮时执行一段 JavaScript。
注释：onclick 属性不适用以下元素：<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style> 或 <title>。
以上就是本篇文章关于css怎么实现图片滑动的相关知识介绍，希望对有需要的朋友有所帮助。
以上就是使用css怎么实现图片的滑动效果？（示例）的详细内容，更多请关注Gxl网其它相关文章！