css3的transition属性的使用
transition是将某个属性从一个属性值在指定的时间内平滑过渡到另一个属性值来实现动画效果.
这个属性一般搭配:hover来使
下面看一个例子:鼠标放在div上,0.2s后将div元素的背景色用一秒的时间变成黄色,变化方式是linear
div{ background-color:red; transition:background-color 1s linear 0.2s;}
div:hover{ background-color:yellow;}
<div>思思博士</div>
鼠标没放上去之前:
鼠标放上去0.2s后 的变化过程:
鼠标放上去的最终效果:
看到这里 大家对与这个属性的用法,心里面应该有了底了.
对于这个属性,每个参数都有一个对应的属性名,也就是说这个属性是可以拆开写的.
非简写形式:
/*div{ background-color:red; transition:background-color 1s linear 0.2s;}*/
div{background-color:red; transition-property:background-color; transition-duration:1s; transition-timing-function:linear; transition-delay:0.2s}
div:hover{ background-color:yellow;}
transition还可以过渡多个效果.
div{ background-color:red; color:black; height:50px; transition:background-color 1s linear,color 1s linear,height 1s linear;} div:hover{ background-color:yellow; color:#F00; height:100px;}
css3的transition属性的使用的更多相关文章
- 使用CSS3的“transition ”属性控制长宽度的缓慢变化
有时候我们可能会想要改变某个资源信息的长宽度,比如改变某个div的宽度,而且需要让这个宽度缓慢改变,而不是突然就改变了.这时候你可能会想到使用jquery的animate()函数,不过这个方法既得引用 ...
- CSS3 : transition 属性
CSS3的 transition 属性用于状态过度效果! 1.语法: transition: property duration timing-function delay; -moz-transit ...
- CSS3使用transition属性实现过渡效果
transition属性目的是让css的一些属性(如background)的以平滑过渡的效果出现.它是一个合并属性,是由以下四个属性组合而成: transition-property:设置应用过渡的C ...
- css3中transition属性详解
css3中通过transition属性可以实现一些简单的动画过渡效果~ 1.语法 transition: property duration timing-function delay; transi ...
- CSS3之transition属性
transition属性可直译为"过渡",主要用于检索或设置对象变换的过渡. 语法: transition:property duration [timing-function] ...
- css3动画属性中的transition属性
一.语法 transition: property duration timing-function delay; 值 描述 transition-property 规定设置过渡效果的 CSS 属性的 ...
- CSS3之transition&transform
参考网页: CSS3 transform 属性使用详解: http://www.renniaofei.com/code/css3-transform-shuxing-shiyong-xiangjie/ ...
- 跟我学习css3之transition
HTML5和css3已经是将来的发展趋势,现在有很多移动端还有一些游戏公司已然使用它们开 发了比较成功的产品.我在2011年的时候也跟着技术潮流初浅的学习了html5+css3.毕竟那 时候我没有把学 ...
- css3 transition属性
最近打算学习css3知识,觉得css3写出来的效果好炫好酷,之前一直想要学习来着.可能之前的决心,毅力,耐心不够,所以想要重整起来,放下浮躁的心态,一步一个脚印,踏踏实实的来学习. 首先学习的是css ...
随机推荐
- IGMP 因特网组管理协议
IGMP(Internet Group Management Protocol)作为因特网组管理协议,用于多播. 与ICMP一样, IGMP也被当作 IP 层的一部分,IGMP报文也通过IP数 ...
- linux:系统启动流程
系统启动流程 本文基于CentOS6 版本 黑色部分为主流程分支,蓝色部分为详细流程分支,绿色部分是注释部分 第一步--加载BIOS打开计算机电源,计算机会首先加载BIOS信息,主要负责检测系统外围关 ...
- asp.net string有多行文字
用如下格式设置
- Eclipse下搭建SWT与Swing图形界面开发环境
一.SWT与Swing介绍 SWT(StandardWidget Toolkit)则是由Eclipse项目组织开发的一套完整的图形界面开发包,虽然当初仅仅是IBM为了编写Eclipse的IDE环境才编 ...
- stark组件
写一个stark组件仿造admin的功能 1:新建一个stark的app 问题:在django每次启动会扫描目录下所有的admin文件,需要扫描项目目录下的每个stark文件,我们需要怎么做 1:看在 ...
- JSON简介[转]
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式. 易于人阅读和编写.同时也易于机器解析和生成. 它基于JavaScript Programming Lan ...
- Hadoop_10_11虚拟机02_虚拟机桥接方式联网【自己的亲测笔记】
[桥接方式] 说明:自己搭建的时候用的是桥接,因为用的是2两个物理机搭建3台虚拟机所以采用桥接便于三个虚拟机在一个网段,但是不知道对后期有没有影响,目前搭建成功 (1)设置桥接方式 查看本地连接网 ...
- NSURLSession学习笔记(一)简介
一.URL Session的基本概念 1.三种工作模式: 默认会话模式(default):工作模式类似于原来的NSURLConnection,使用的是基于磁盘缓存的持久化策略,使用用户keychain ...
- 《DSP using MATLAB》示例9.1
前段时间发生许多事,主要是楼盘开发商资金链紧张,无法通过验收,拿不到两书一表(住宅质量保证书.住宅使用说明书.房屋建筑工程竣工验收备案表), 各种配套设施都没有,就在这条件下还强制我们业主收房,心塞, ...
- selenium数据驱动
Selenium最后一个知识点——数据驱动.学会了这个Selenium就算学完啦~ 看代码: 这是修改的testSell.py文件. # coding: utf-8 import ddtimport ...