這篇文章主要介紹了使用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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
