给锚文本(a:hover)颜色变换增加延迟效果

洪七公 · 发表于 2016-8-12 02:50:43

经常在网站上，特别是国外的网站看到一种颜色变换的效果，就是当鼠标经过链接时，颜色不是马上变化，而是有一个延迟过渡的效果。

例如我们正常对锚链接的做法是

复制代码

链接背景默认为白色，当鼠标经过该链接时，背景颜色马上就变成灰尘色。

要增加一个延迟过渡效果需要给a增加以下CSS代码：

复制代码

0.4s表示变换时间为0.4秒

改完之后CSS代码为：

a{background:#fff;-webkit-transition: all 0.4s;-moz-transition: all 0.4s;-o-transition: all 0.4s; }
a:hover{background:#ccc;}

复制代码

经测试，该效果在Chrome,IE10均有效，IE6无效。其它浏览器未测试。

		自动登录	找回密码
密码			会员注册

[其他方面] 给锚文本(a:hover)颜色变换增加延迟效果