使用css怎麼實現圖片的滑動效果？ （例）
- 藏色散人原創
- 2018-08-15 14:01:598202瀏覽
本篇文章主要介紹關於css實現圖片的滑動效果範例，希望大家閱讀完本篇後對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" alt="使用css怎麼實現圖片的滑動效果？ （例）" >
</div>
</div>
<button onclick="document.getElementById('slider').classList.toggle('closed');">点击试试</button>
</body>
<html>上述程式碼可直接複製在本機測試效果如下圖：
只要滑鼠點擊下面的按鈕，就會出現圖片自下而上的滑動效果。其中有一個onclick 屬性，由元素上的滑鼠點擊觸發，即點擊按鈕時執行一段 JavaScript。
註解：onclick
屬性不適用下列元素：
、、、
以上就是這篇文章關於css怎麼實現圖片滑動的相關知識介紹，希望對有需要的朋友有所幫助。
以上是使用css怎麼實現圖片的滑動效果？ （例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn