CSS3中transition-duration参数对hover前后两种过渡时间的影响

transition-duration这个参数是设置过渡时间的，将transition-duration放在哪个类中，那么在这个类被启用时就会按照transition-duration设定的时间来过渡。

例如，有类 .a 和 .a:hover

1.如果只在 .a 中设定transition-duration: 3s;的话，那么在鼠标覆盖这个元素和鼠标离开元素时，过渡时间都是3s。

2.如果在 .a 中设定transition-duration:
3s; 在 .a:hover 中设定transition-duration: 6s; 那么在鼠标覆盖元素时(即该元素样式变为 .a:hover 的过程)过渡时间为6s，鼠标离开元素时(即该元素样式变为
.a 的过程)的过渡时间为3s。

时间： 2024-10-22 21:45:35

CSS3中transition-duration参数对hover前后两种过渡时间的影响的相关文章

CSS3中transition-duration參数对hover前后两种过渡时间的影响

transition-duration这个參数是设置过渡时间的,将transition-duration放在哪个类中.那么在这个类被启用时就会依照transition-duration设定的时间来过渡. 比如.有类 .a 和 .a:hover 1.假设仅仅在 .a 中设定transition-duration: 3s;的话.那么在鼠标覆盖这个元素和鼠标离开元素时.过渡时间都是3s. 2.假设在 .a 中设定transition-duration: 3s; 在 .a:hover 中设定transi

关于.animate()函数与css3中transition合用失效问题

在写自己项目的时候遇到了这样的一个效果,左侧菜单按钮点击弹出菜单的同时,菜单按钮变成 × 状.(参考关键字:汉堡按钮 http://www.htmleaf.com/Demo/201506232094.html) 大概就是下面gif中的动画效果: 大致的动画效果如下 1. 第一条横线(div)rotate -45deg 2. 第二条横线渐进消失 3. 第三条横线 rotate 45deg 像之前链接里面用纯 CSS3 实现的效果,改变元素 :hover 的 CSS 样式表就行. 因为现在是用点击触

Android中EditText显示明文与密文的两种方式

效果图布局文件 <?xml version="1.0" encoding="utf-8"?>  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/to

【转】oracle 中随机取一条记录的两种方法

oracle 中随机取一条记录的两种方法 V_COUNT INT:=0; V_NUM INT :=0; 1:TBL_MYTABLE 表中要有一个值连续且唯一的列FID BEGIN SELECT COUNT(*) INTO V_COUNT FROM TBL_MYTABLE; SELECT TRUNC(DBMS_RADOM.VALUE(1,V_COUNT+1)) INTO V_NUM FROM DUAL; SELECT * FROM TBL_MYTABLE T WHERE T.FID=V_NUM;

[转]在计算机程序中，完成重复的任务有两种方式：递归和迭代(循环)。

在计算机程序中,完成重复的任务有两种方式:递归和迭代(循环) 递归的一个例子:从前有座山,山里有座庙,庙里一个老和尚在给小和尚讲故事,内容是“从前有座山,山里有座庙,庙里一个老和尚在给小和尚讲故事,内容是“从前有座山,山里有座庙,庙里一个老和尚在给小和尚讲故事,内容是“...... 循环的一个例子:炉子上有99锅汤,让我不小心喝了一锅,炉子上还有98锅汤;炉子上有98锅汤,让我不小心喝了一锅,炉子上还有97锅汤;炉子上有97锅汤,让我不小心喝了一锅,炉子上还有96锅汤; ...... http:

关于网页中不刷新页面改变验证码的两种方法

今天做一个注册的页面,需要输入验证码.验证码的生成是动态的,不过要刷新页面,才能改变验证码,因为刷新后浏览器会向服务器提交新的请求,服务器就动态生成新的验证码响应给浏览器.为了能够在不刷新页面的情况下改变验证码,需要JavaScript的支持. 第一种方法是在请求地址后面带参数,这是一个小窍门.因为浏览器访问服务器的时候地址后面可以带上参数一起传给服务器,而加载内容是只看地址不看后面的参数:另外在<img src="地址"/>中,只要浏览器发现地址改变了就会自动重新加载该地

Android中界面实现全屏显示的两种方式

在开发android的应用当中,我们会遇到将一些界面设置为全屏显示的格式,有两种实现的方法.其一是在Java代码中实现,其二是在配置文件中实现. 1. 在Java代码中设置 super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE); //无title getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, Window

Android中使用Gson解析JSON数据的两种方法

Json是一种类似于XML的通用数据交换格式,具有比XML更高的传输效率;本文将介绍两种方法解析JSON数据,需要的朋友可以参考下 Json是一种类似于XML的通用数据交换格式,具有比XML更高的传输效率. 从结构上看,所有的数据(data)最终都可以分解成三种类型: 第一种类型是标量(scalar),也就是一个单独的字符串(string)或数字(numbers),比如"北京"这个单独的词. 第二种类型是序列(sequence),也就是若干个相关的数据按照一定顺序并列在一起,又叫做数组

js中 var functionName = function() {} 和 function functionName() {} 两种函数声明的区别

js中有两种声明函数的方法,分别为: var functionOne = function() { // Some code }; function functionTwo() { // Some code } 为什么会有两种不同的方法?每个方法的优点和缺点分别是什么?有什么情况是一种方法能完成而另外一种方法不能完成的吗? 答: by @Greg 不同点在于functionOne只会在到达赋值的那一行才会被真正定义,而functionTwo会在包含它的函数或script脚本执行的时候马上被定