使用CSS3的“transition ”属性控制长宽度的缓慢变化
来源:互联网 发布:捷豹淘宝电话采集 编辑:程序博客网 时间:2024/05/17 05:06
转载请注明出处:http://blog.csdn.net/dongdong9223/article/details/53374736
本文出自【我是干勾鱼的博客】
有时候我们可能会想要改变某个资源信息的长宽度,比如改变某个div的宽度,而且需要让这个宽度缓慢改变,而不是突然就改变了。这时候你可能会想到使用jquery的animate()函数,不过这个方法既得引用jquery,又得使用函数,有点太简单粗暴了,今天介绍一种更为方便而且优雅的方法,那就是使用CSS3的“transition”属性。
在w3school上对“transition”属性有详细的解释,可以设置变化的时间,比如:
div { transition:width 2s;}
这是将变化时间设置为2秒结束。
这里还要说一下,当使用火狐浏览器进行调试时,还可以改变长宽度缓慢变化时的模式,比如先快后慢,或是两边快中间慢等等,如图的css:
如图是默认的曲线变化方式,还有下面的“Backward”是像跑步一样先后退一下再前进,到了终点多跑一点再退回来。里面这些都很有意思,可以自己试一试。
要注意,在“火狐浏览器”下调试前端可以看到这些尝试,但在“chrome浏览器”下看不到,但是如果加上的话效果也是管用的。
2 0
- 使用CSS3的“transition ”属性控制长宽度的缓慢变化
- CSS3的transition属性
- css3的transition属性
- CSS3的 transition:属性 延续时间 速率变化 延迟时间
- CSS3 transition的使用
- css3的transition属性详解
- CSS3的【transition-duration】属性
- -webkit-transition--谷歌浏览器可以使用的css3属性
- css3的属性transition制作菜单导航
- css3中transition属性的详细介绍
- CSS3 transition规范的实际使用经验
- css3的过渡transition
- CSS3的过渡 transition
- css3的transition
- 利用css3属性:transition-duration来做简单的动画
- CSS3中和动画有关的属性transform、transition 和 animation
- CSS3中和动画有关的属性transform、transition 和 animation
- css3.0中transition属性设置过度的动态效果
- 机器人操作系统ROS Indigo 入门学习(10)——使用rosed编辑ROS文件
- C++编写二元关系等价及其商集
- Android点击水纹效果和QQ拖拽效果的底部导航栏
- 在 Android 5.1.1 执行 remount system failed 解决方法
- 索引碎片
- 使用CSS3的“transition ”属性控制长宽度的缓慢变化
- 机器人操作系统ROS Indigo 入门学习(11)——创建一个ROS msg和srv
- DEBUGGING AND OPTIMIZING MEMORY
- 提取多层嵌套JSON类型数据
- jQuery笔记总结
- java序列化之Serializable和Externalizable
- Android 序列化与反序列化
- Kohana框架的特性
- 基于STM32处理器的USB HID模拟鼠标键盘(2) - 实现键盘鼠标功能