利用CSS3的transition属性实现滑动效果


Posted in HTML / CSS onAugust 05, 2015

首先援引一下w3school上的transition基本知识:

定义和用法
transition 属性是一个简写属性,用于设置四个过渡属性:
transition-property
transition-duration
transition-timing-function
transition-delay
注释:请始终设置 transition-duration 属性,否则时长为 0,就不会产生过渡效果。

利用CSS3的transition属性实现滑动效果
语法

CSS Code复制内容到剪贴板
  1. transition: property duration timing-function delay;  

实现滑动效果
只需要一个DIV元素便可实现滑动效果,避免了使用JavaScript为元素的动画(IE浏览器下仅支持IE9以上)
HTML代码

XML/HTML Code复制内容到剪贴板
  1. <div style="height: 200px; width: 200px; border: 1px solid #ccc;">  
  2.       <div class="slider" id="slider">这里是内容</div>  
  3.   </div>  
  4.   <button onclick="document.getElementById('slider').classList.toggle('closed');">点击看看</button>  

CSS代码

CSS Code复制内容到剪贴板
  1. .slider {   
  2.     overflow-y: hidden;   
  3.     max-height500px;   
  4.     /* 最大高度 */  
  5.     background: pink;   
  6.     height200px;   
  7.     width200px;   
  8.     /*  Webkit内核浏览器:Safari and Chrome*/  
  9.     -webkit-transition-property: all;   
  10.     -webkit-transition-duration: .5s;   
  11.     -webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);   
  12.     /*  Mozilla内核浏览器:firefox3.5+*/  
  13.     -moz-transition-property: all;   
  14.     -moz-transition-duration: .5s;   
  15.     -moz-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);   
  16.     /*  Opera*/  
  17.     -o-transition-property: all;   
  18.     -o-transition-duration: .5s;   
  19.     -o-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);   
  20.     /*  IE9*/  
  21.     -ms-transition-property: all;   
  22.     -ms-transition-duration: .5s;   
  23.     -ms-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);   
  24. }   
  25. .slider.closed {   
  26.     max-height: 0;   
  27. }  

demo演示地址:http://www.zjgsq.com/example?pid=1166

HTML / CSS 相关文章推荐
CSS3实现类似翻书效果的过渡动画的示例代码
Sep 06 HTML / CSS
CSS3用@font-face实现自定义英文字体
Sep 23 HTML / CSS
利用css3-animation实现逐帧动画效果
Mar 10 HTML / CSS
css 元素选择器的简单实例
May 23 HTML / CSS
HTML5离线缓存Manifest是什么
Mar 09 HTML / CSS
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
Jun 23 HTML / CSS
html5各种页面切换效果和模态对话框用法总结
Dec 15 HTML / CSS
详解HTML5中表单验证的8种方法介绍
Dec 19 HTML / CSS
基于HTML5实现类似微信手机摇一摇功能(计算摇动次数)
Jul 24 HTML / CSS
Html5之title吸顶功能
Jun 04 HTML / CSS
html2canvas生成的图片偏移不完整的解决方法
May 19 HTML / CSS
Canvas实现放大镜效果完整案例分析(附代码)
Nov 26 HTML / CSS
详解CSS3中@media的实际使用
Aug 04 #HTML / CSS
CSS3的RGBA中关于整数和百分比值的转换
Aug 04 #HTML / CSS
CSS3中使用RGBA设置透明度的示例
Aug 04 #HTML / CSS
详解CSS中iconfont的使用
Aug 04 #HTML / CSS
使用CSS3来匹配横屏竖屏的简单方法
Aug 04 #HTML / CSS
CSS3的一个简单导航栏实现
Aug 03 #HTML / CSS
使用CSS3和Checkbox实现JQuery的一些效果
Aug 03 #HTML / CSS
You might like
php缩小png图片不损失透明色的解决方法
2013/12/25 PHP
JavaScript创建命名空间的5种写法
2014/06/24 PHP
WordPress中自定义后台管理界面配色方案的小技巧
2015/12/29 PHP
PHP实现在对象之外访问其私有属性private及保护属性protected的方法
2017/11/20 PHP
PHP7 整型处理机制修改
2021/03/09 PHP
关于window.pageYOffset和document.documentElement.scrollTop
2011/04/05 Javascript
Three.js源码阅读笔记(物体是如何组织的)
2012/12/27 Javascript
flash+jQuery实现可关闭及重复播放的压顶广告
2015/04/15 Javascript
js实现上一页下一页的效果【附代码】
2016/03/10 Javascript
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
2016/05/30 Javascript
bootstrap网格系统使用方法解析
2017/01/13 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
2017/02/17 Javascript
javascript简单写的判断电话号码实例
2017/05/24 Javascript
解决Mac node版本升级失败的问题
2018/05/16 Javascript
Python单链表的简单实现方法
2014/09/23 Python
Python的__builtin__模块中的一些要点知识
2015/05/02 Python
Python魔法方法详解
2019/02/13 Python
python文件处理fileinput使用方法详解
2020/01/02 Python
解决Tensorboard可视化错误:不显示数据 No scalar data was found
2020/02/15 Python
Python Flask上下文管理机制实例解析
2020/03/16 Python
解决jupyter notebook显示不全出现框框或者乱码问题
2020/04/09 Python
Django实现文章详情页面跳转代码实例
2020/09/16 Python
详解Python GUI编程之PyQt5入门到实战
2020/12/10 Python
基于html5 canvas做批改作业的小插件
2020/05/20 HTML / CSS
KLOOK客路:发现更好玩的世界,预订独一无二的旅行体验
2016/12/16 全球购物
法国一家芭蕾舞鞋公司:Repetto
2018/11/12 全球购物
英国玛莎百货新西兰:Marks & Spencer New Zealand
2019/07/21 全球购物
材料成型专业个人求职信范文
2013/09/25 职场文书
妇产医师自荐信
2014/01/29 职场文书
财会专业毕业生自荐信
2014/07/09 职场文书
观看信仰心得体会
2014/09/04 职场文书
普通党员四风问题对照检查材料
2014/09/27 职场文书
会计人员岗位职责
2015/02/03 职场文书
党小组评议意见
2015/06/02 职场文书
windows下快速安装nginx并配置开机自启动的方法
2021/05/11 Servers
JavaScript数组reduce()方法的语法与实例解析
2021/07/07 Javascript