有时候我们可能会想要改变某个资源信息的长宽度,比如改变某个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. css3画半圆 , 加上一点动画

    border-radius制作半圆与制作圆形的方法是一样的,只是元素的宽度与圆角方位要配合一致,不同的宽度和高度比例,以及圆角方位,可以制作上半圆.下半圆.左半圆和右半圆效果.例如: .semicir ...

  2. EJB JBOSS的安装

    下载地址:http://www.jboss.org/jbossas/downloads 下载JBoss 4.2.3-->解压 启动:bin-->run.bat 管理后台:www.local ...

  3. 重装系统,打开VS进行程序调试运行的时候 Unable to find manifest signing certificate in the certificate store

    重装系统,打开VS进行程序调试运行的时候 Unable to find manifest signing certificate in the certificate store. 项目的属性-> ...

  4. url override implements session

    url 重写实现会话概述 URL重写是对GET请求参数的应用,当服务器响应浏览器上一次请求时,将某些相关信息以超链接方式响应给浏览器,超链接中包括请求参数信息. 特点:URL必须以GET方式发送请求. ...

  5. Hive设置变量

    hive --define --hivevar --hiveconf set 1.hivevar命名空间 用户自定义变量 hive -d name=zhangsan hive --define nam ...

  6. insufficient privileges for 'SYS' when 'shutdown immediate'

    SQL> select * from v$version; BANNER------------------------------------------------------------- ...

  7. 微软MVP社区秋日巡讲 —— 北京Windows Phone应用开发训练营

    微软MVP社区秋日巡讲 —— 北京Windows  Phone应用开发训练营 活动说明和报名地址www.aka.ms\mvpbeijing 欢迎北京的朋友参与在今年10月举办的Windows Phon ...

  8. 【Java】函数使用

    package aaa; public class aaa { public static int add(int a,int b) { return a+b; } public static voi ...

  9. hibernate的延迟加载和抓取策略

    一,延迟加载 1.实体类延迟加载 通过代理机制完成,由javassist类库实现运行时代理,修改实体类的字节码实现了运行时代理     <class lazy="true|false& ...

  10. 不同服务器数据库之间的数据定时同步到sql server (支持mysql,oracle数据库同步到sql server)

    1,在目标数据库新增服务器对象->连接到服务器->新建服务器连接 2,编写数据同步业务PROC ALTER PROC TestProc AS BEGIN --打开完全事物回滚 SET XA ...