这篇文章主要介绍了使用css实现图片滑动效果的方法，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
下面给大家举一个简单的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实现图片滑动效果的方法内容对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，遇到问题就找亿速云，详细的解决方法等着你来学习!
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
