这篇文章主要讲解了“如何利用CSS3的transition属性实现滑动效果”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何利用CSS3的transition属性实现滑动效果”吧!
首先援引一下w3school上的transition基本知识:
定义和用法
transition 属性是一个简写属性,用于设置四个过渡属性:
transition-property
transition-duration
transition-timing-function
transition-delay
注释:请始终设置 transition-duration 属性,否则时长为 0,就不会产生过渡效果。
语法
CSS Code复制内容到剪贴板
transition: property duration timing-function delay;
实现滑动效果
只需要一个DIV元素便可实现滑动效果,避免了使用JavaScript为元素的动画(IE浏览器下仅支持IE9以上)
HTML代码
XML/HTML Code复制内容到剪贴板
<div style="height: 200px; width: 200px; border: 1px solid #ccc;">
<div class="slider" id="slider">这里是内容</div>
</div>
<button onclick="document.getElementById('slider').classList.toggle('closed');">点击看看</button>
CSS代码
CSS Code复制内容到剪贴板
.slider {
overflow-y: hidden;
max-height: 500px;
background: pink;
height: 200px;
width: 200px;
-webkit-transition-property: all;
-webkit-transition-duration: .5s;
-webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
-moz-transition-property: all;
-moz-transition-duration: .5s;
-moz-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
-o-transition-property: all;
-o-transition-duration: .5s;
-o-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
-ms-transition-property: all;
-ms-transition-duration: .5s;
-ms-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
.slider.closed {
max-height: 0;
}
demo演示地址:http://www.zjgsq.com/example?pid=1166
感谢各位的阅读,以上就是“如何利用CSS3的transition属性实现滑动效果”的内容了,经过本文的学习后,相信大家对如何利用CSS3的transition属性实现滑动效果这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是编程网,小编将为大家推送更多相关知识点的文章,欢迎关注!