本篇文章主要给大家介绍关于 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">
- </div>
- </div>
- <button onclick="document.getElementById('slider').classList.toggle('closed');"> 点击试试 </button>
- </body>
- <HTML>
效果图:
更多 Web 开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/css3/17621.html