源码论坛,商业源码下载,尽在锦尚中国商业源码论坛

标题: 给锚文本(a:hover)颜色变换增加延迟效果 [打印本页]

---

作者: 洪七公    时间: 2016-8-12 02:50
标题: 给锚文本(a:hover)颜色变换增加延迟效果
经常在网站上，特别是国外的网站看到一种颜色变换的效果，就是当鼠标经过链接时，颜色不是马上变化，而是有一个延迟过渡的效果。

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

1. a{background:#fff;}
   
2. a:hover{background:#ccc;}

复制代码

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

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

1. -webkit-transition: all 0.4s;-moz-transition: all 0.4s;-o-transition: all 0.4s;

复制代码

0.4s表示变换时间为0.4秒

改完之后CSS代码为：

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

复制代码

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

---

欢迎光临 源码论坛,商业源码下载,尽在锦尚中国商业源码论坛 (https://bbs.52jscn.com/)

Powered by Discuz! X3.3