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-11-10 11:24:21

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 中设定transit

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

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

iOS 处理方法中的可变參数

## iOS 处理方法中的可变參数 近期写了一个自己定义的对话框的demo,想模仿系统的UIAlertView的实现方式.对处理可变參数的时候,遇到了小问题,于是谷歌了一下.写下了处理问题的方法.记录下来,以备后需. 代码实现 - (instancetype)initWithTitle:(NSString *)title message:(NSString *)message delegate:(id)delegate cancelButtonTitle:(NSString *)cancelBu

Extjs4.2 ajax请求url中传中文參数乱码问题

今天有个需求须要在url中传入中文參数.结果在后台取得时出现乱码,怀疑可能是编码问题.上网查询了资料,试了几种办法.发现有一种可行,记录在此,以便查阅. url中用encodeURI 进行2次编码: Ext.Ajax.request({ url:"updateadminuser.do?"+userid+"&uname="+encodeURI(encodeURI(uname)), success:function (response) { store.load

OpenCV中的SVM參数优化

SVM(支持向量机)是机器学习算法里用得最多的一种算法.SVM最经常使用的是用于分类,只是SVM也能够用于回归,我的实验中就是用SVM来实现SVR(支持向量回归). 对于功能这么强的算法,opencv中自然也是有集成好了,我们能够直接调用.OpenCV中的SVM算法是基于LibSVM软件包开发的,LibSVM是台湾大学林智仁(Lin Chih-Jen)等开发设计的一个简单.易于使用和高速有效的SVM模式识别与回归的软件包. 网上讲opencv中SVM使用的文章有非常多,但讲SVM參数优化的文章却

js实现从字符串中查找出现次数最多的字符的两种解决办法

方法一:正则表达式匹配 1 var str = "adadfdfseffserfefsefseeffffftsdg"; 2 var maxLength = 0; var result = ""; 3 while (str != '') { 4 oldStr = str; 5 getStr = str.charAt(0); 6 str = str.replace(new RegExp(getStr, "g"), ""); 7 i

c中无符号(unsigned)和有符号(signed)两种类型。

整型的每一种都分为:无符号(unsigned)和有符号(signed)两种类型(float和double总是带符号的),在默认情况下声明的整型变量都是有符号的类型(char有点特别),如果需声明无符号类型的话就需要在类型前加上unsigned.无符号版本和有符号版本的区别就是无符号类型能保存2倍于有符号类型的正整数数据,比如16位系统中一个short能存储的数据的范围为-32768~32767,而unsigned能存储的数据范围则是0~65535.由于在计算机中,整数是以补码形式存放的.根据最高

Android中Fragment与Activity之间的交互(两种实现方式)

(未给Fragment的布局设置BackGound) 之前关于Android中Fragment的概念以及创建方式,我专门写了一篇博文<Android中Fragment的两种创建方式>,就如何创建Fragment混合布局做了详细的分析,今天就来详细说道说道Fragment与宿主Activity之间是如何实现数据交互的. 我们可以这样理解,宿主Activity中的Fragment之间要实现信息交互,就必须通过宿主Activity,Fragment之间是不可能直接实现信息交互的. Fragment与

Android中实现全屏、无标题栏的两种办法

在进行UI设计时,我们经常需要将屏幕设置成无标题栏或者全屏.要实现起来也非常简单,主要有两种方法:配置xml文件和编写代码设置. 1.在xml文件中进行配置 在项目的清单文件AndroidManifest.xml中,找到需要全屏或设置成无标题栏的Activity,在该Activity进行如下配置即可. 实现全屏效果: android:theme="@android:style/Theme.NoTitleBar.Fullscreen" 实现无标题栏(但有系统自带的任务栏): androi