设为首页 收藏本站
查看: 253|回复: 8

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

[复制链接]
  • TA的每日心情
    擦汗
    2016-12-12 12:06
  • 签到天数: 1 天

    [LV.1]初来乍到

    632

    主题

    639

    帖子

    102971万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    1029712602
    发表于 2016-9-27 21:08:40 | 显示全部楼层 |阅读模式
    经常在网站上,特别是国外的网站看到一种颜色变换的效果,就是当鼠标经过链接时,颜色不是马上变化,而是有一个延迟过渡的效果。
    例如我们正常对锚链接的做法是
    • a{background:#fff;}
    • a:hover{background:#ccc;}
    链接背景默认为白色,当鼠标经过该链接时,背景颜色马上就变成灰尘色。
    要增加一个延迟过渡效果需要给a增加以下CSS代码:
    • -webkit-transition: all 0.4s;-moz-transition: all 0.4s;-o-transition: all 0.4s;
    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无效。其它浏览器未测试。

    回复 天涯海角搜一下: 百度 谷歌 360 搜狗 搜搜 有道 谷粉 雅虎 必应 即刻

    使用道具 举报

    该用户从未签到

    0

    主题

    23

    帖子

    23

    积分

    新手上路

    Rank: 1

    积分
    23
    发表于 2017-6-28 15:08:58 | 显示全部楼层
    回复 支持 反对

    使用道具 举报

    该用户从未签到

    0

    主题

    191

    帖子

    201

    积分

    中级会员

    Rank: 3Rank: 3

    积分
    201
    发表于 2017-7-30 20:16:03 | 显示全部楼层
    回复 支持 反对

    使用道具 举报

    该用户从未签到

    0

    主题

    76

    帖子

    81

    积分

    注册会员

    Rank: 2

    积分
    81
    发表于 2017-8-15 19:21:48 | 显示全部楼层
    回复 支持 反对

    使用道具 举报

    该用户从未签到

    0

    主题

    38

    帖子

    38

    积分

    新手上路

    Rank: 1

    积分
    38
    发表于 7 天前 | 显示全部楼层
    回复 支持 反对

    使用道具 举报

    该用户从未签到

    0

    主题

    121

    帖子

    126

    积分

    注册会员

    Rank: 2

    积分
    126
    发表于 6 天前 | 显示全部楼层
    回复 支持 反对

    使用道具 举报

    该用户从未签到

    0

    主题

    50

    帖子

    50

    积分

    注册会员

    Rank: 2

    积分
    50
    发表于 3 天前 | 显示全部楼层
    回复 支持 反对

    使用道具 举报

    该用户从未签到

    0

    主题

    38

    帖子

    38

    积分

    新手上路

    Rank: 1

    积分
    38
    发表于 前天 11:30 | 显示全部楼层
    回复 支持 反对

    使用道具 举报

    该用户从未签到

    0

    主题

    20

    帖子

    25

    积分

    新手上路

    Rank: 1

    积分
    25
    发表于 昨天 10:50 | 显示全部楼层
    回复 支持 反对

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    亲爱的,赶快加入我们吧!
    X

    QQ|关于我们|Archiver|手机版|小黑屋|珊潮网络科技 ( 闽ICP备16035387号-1 ) |网站地图  

    GMT+8, 2017-8-23 12:28 , Processed in 1.535156 second(s), 49 queries , Gzip On.

    Powered by Discuz! X3.2 Licensed

    © 2001-2013 Comsenz Inc.

    快速回复 返回顶部 返回列表