本篇文章主要介紹關於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中文網其他相關文章!