有时候我们可能会想要改变某个资源信息的长宽度,比如改变某个div的宽度,而且需要让这个宽度缓慢改变,而不是突然就改变了。这时候你可能会想到使用jquery的animate()函数,不过这个方法既得引用jquery,又得使用函数,有点太简单粗暴了,今天介绍一种更为方便而且优雅的方法,那就是使用CSS3的“transition”属性。

w3school上对“transition”属性有详细的解释,可以设置变化的时间,比如:

div {
transition:width 2s;
}

在用js来改变元素的宽或高,就可以实现动态变化

这是将变化时间设置为2秒结束。

这里还要说一下,当使用火狐浏览器进行调试时,还可以改变长宽度缓慢变化时的模式,比如先快后慢,或是两边快中间慢等等,如图的css:

如图是默认的曲线变化方式,还有下面的“Backward”是像跑步一样先后退一下再前进,到了终点多跑一点再退回来。里面这些都很有意思,可以自己试一试。 
要注意,在“火狐浏览器”下调试前端可以看到这些尝试,但在“chrome浏览器”下看不到,但是如果加上的话效果也是管用的。

使用CSS3的“transition ”属性控制长宽度的缓慢变化的更多相关文章

  1. CSS3 : transition 属性

    CSS3的 transition 属性用于状态过度效果! 1.语法: transition: property duration timing-function delay; -moz-transit ...

  2. css3中transition属性详解

    css3中通过transition属性可以实现一些简单的动画过渡效果~ 1.语法 transition: property duration timing-function delay; transi ...

  3. CSS3使用transition属性实现过渡效果

    transition属性目的是让css的一些属性(如background)的以平滑过渡的效果出现.它是一个合并属性,是由以下四个属性组合而成: transition-property:设置应用过渡的C ...

  4. CSS3之transition属性

    transition属性可直译为"过渡",主要用于检索或设置对象变换的过渡. 语法: transition:property duration [timing-function] ...

  5. DIV宽度自动缓慢变化

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. css3的transition属性的使用

    transition是将某个属性从一个属性值在指定的时间内平滑过渡到另一个属性值来实现动画效果.这个属性一般搭配:hover来使 下面看一个例子:鼠标放在div上,0.2s后将div元素的背景色用一秒 ...

  7. css3动画属性中的transition属性

    一.语法 transition: property duration timing-function delay; 值 描述 transition-property 规定设置过渡效果的 CSS 属性的 ...

  8. 跟我学习css3之transition

    HTML5和css3已经是将来的发展趋势,现在有很多移动端还有一些游戏公司已然使用它们开 发了比较成功的产品.我在2011年的时候也跟着技术潮流初浅的学习了html5+css3.毕竟那 时候我没有把学 ...

  9. CSS3之transition&transform

    参考网页: CSS3 transform 属性使用详解: http://www.renniaofei.com/code/css3-transform-shuxing-shiyong-xiangjie/ ...

随机推荐

  1. webpack2引入bootstrap的坑

    在webpack官网教程的代码分离-css章节中,给出的例子是这样的. //安装 ExtractTextWebpackPlugin 如下 npm install --save-dev extract- ...

  2. Hello world &博客客户端试用

    第一篇博客,使用 open live writer客户端进行测试,下载地址见http://openlivewriter.org/,软件为英文,但配置比较简单,选择“其他博客类型”就ok. 同时安装了语 ...

  3. 在已配置成功的opencv3.2.0下配置opencv_contrib模块

    简介: 之前在Ubuntu下配置OpenCV时,因为对opencv3..0不是特别了解,没有把opencv_contrib进行安装,这里提醒大家尽量要一次性安装完毕,减少不必要的麻烦. .0文件夹 ( ...

  4. ios 九宫格

    #define kViewW 40 //宽度 #define kViewH 61 //高度 #define kColCount 4 //共几列 CGFloat marginX = (self.view ...

  5. 禅道Bug管理工具环境搭建

    下载地址:http://sourceforge.net/projects/zentao/files/8.2/ZenTaoPMS.8.2.stable.exe/download 1.解压ZenTaoPM ...

  6. Ubuntu 16.04下 - vi编辑器使用【backspace】无法删除

    参考:https://blog.csdn.net/leiwangzhongde/article/details/83339589

  7. Two tomcat 冲突

    一.一般修改 路径: /opt/apache-tomcat/conf/server.xml 1.第一个tomcat使用默认配置 2.第二个tomcat一般配置 二.特殊修改 1.第二个tomcat特殊 ...

  8. 要提高SQL查询效率where语句条件的先后次序应如何写

    我们要做到不但会写SQL,还要做到写出性能优良的SQL语句. (1)选择最有效率的表名顺序(只在基于规则的优化器中有效): Oracle的解析器按照从右到左的顺序处理FROM子句中的表名,FROM子句 ...

  9. 可以简易设置文字内边距的EdgeInsetsLabel

    可以简易设置文字内边距的EdgeInsetsLabel 最终效果: 源码: EdgeInsetsLabel.h 与 EdgeInsetsLabel.m // // EdgeInsetsLabel.h ...

  10. wxpython 窗口排版- proportion/flag/border参数说明

    新学习wxpython,一直纠结于窗口控件的排版,经过几天的查资料.试验,总结如下. 1.需求实例 来个实例,窗口有3行控件 第一行是文本提示(大小不变,文字左对齐,控件居左). 第二行依次为文本提示 ...