源码论坛公告:有很多假冒锦尚中国网址和名称的网站出现,还有声称是跟我们合作网站,请擦亮眼睛避免被骗,本站唯一域名为52jscn.com 【点击此处将锦尚放在桌面

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

 找回密码
 会员注册

QQ登录

只需一步,快速开始

新版大型房产门户源码下载
知名广告联盟 精准不扣量
企业免备案主机仅需80元
亿恩免费建网站 服务器特价
锦尚中国源码论坛
百度站长平台 精确提升SEO
旅游网解决方案 大型旅游门户
大型装修门户助您抢占商机天翼云主机 四川资源池开启微信营销项目诚招代理
网站源码下载,商业源码下载,源码论坛,网站源码,php源码,asp源码全部就在锦尚中国源码论坛
源码下载,源码论坛,网站源码,php源码,asp源码全部就在锦尚中国源码论坛
网站源码下载,商业源码下载,源码论坛,网站源码,php源码,asp源码全部就在锦尚中国源码论坛
源码下载,源码论坛,网站源码,php源码,asp源码全部就在锦尚中国源码论坛
网站源码下载,商业源码下载,源码论坛,网站源码,php源码,asp源码全部就在锦尚中国源码论坛
查看: 3596|回复: 0

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

[复制链接]

1738

主题

1873

帖子

1172万

金币

超级版主

Rank: 8Rank: 8

积分
23452889
发表于 2016-8-12 02:50:43 | 显示全部楼层 |阅读模式
经常在网站上,特别是国外的网站看到一种颜色变换的效果,就是当鼠标经过链接时,颜色不是马上变化,而是有一个延迟过渡的效果。

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

  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无效。其它浏览器未测试。
您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

锦尚中国源码

锦尚中国,为中国网站设计添动力 ( 鲁ICP备09033200号 )

GMT+8, 2019-1-21 15:26 , Processed in 0.160029 second(s), 27 queries .

带宽由 锦尚数据 提供 专业的数据中心

© 锦尚中国源码论坛 52jscn Inc. 非法入侵必将受到法律制裁 法律顾问:IT法律网 锦尚爱心