设为首页 收藏本站
查看: 304|回复: 10

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

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

    [LV.1]初来乍到

    638

    主题

    645

    帖子

    102971万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    1029712608
    发表于 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

    主题

    91

    帖子

    96

    积分

    注册会员

    Rank: 2

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

    使用道具 举报

    该用户从未签到

    0

    主题

    53

    帖子

    53

    积分

    注册会员

    Rank: 2

    积分
    53
    发表于 2017-8-16 13:26:09 | 显示全部楼层
    回复 支持 反对

    使用道具 举报

    该用户从未签到

    0

    主题

    134

    帖子

    139

    积分

    注册会员

    Rank: 2

    积分
    139
    发表于 2017-8-17 21:00:33 | 显示全部楼层
    回复 支持 反对

    使用道具 举报

    该用户从未签到

    0

    主题

    56

    帖子

    56

    积分

    注册会员

    Rank: 2

    积分
    56
    发表于 2017-8-20 15:10:46 | 显示全部楼层
    回复 支持 反对

    使用道具 举报

    该用户从未签到

    0

    主题

    53

    帖子

    53

    积分

    注册会员

    Rank: 2

    积分
    53
    发表于 2017-8-21 11:30:35 | 显示全部楼层
    回复 支持 反对

    使用道具 举报

    该用户从未签到

    0

    主题

    32

    帖子

    37

    积分

    新手上路

    Rank: 1

    积分
    37
    发表于 2017-8-22 10:50:08 | 显示全部楼层
    回复 支持 反对

    使用道具 举报

    该用户从未签到

    0

    主题

    12

    帖子

    17

    积分

    新手上路

    Rank: 1

    积分
    17
    发表于 2017-9-29 19:56:58 | 显示全部楼层
    回复 支持 反对

    使用道具 举报

    该用户从未签到

    0

    主题

    48

    帖子

    48

    积分

    新手上路

    Rank: 1

    积分
    48
    发表于 2017-10-8 17:39:03 | 显示全部楼层
    回复 支持 反对

    使用道具 举报

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

    本版积分规则

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

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

    GMT+8, 2017-10-22 11:08 , Processed in 0.783726 second(s), 50 queries , Gzip On.

    Powered by Discuz! X3.2 Licensed

    © 2001-2013 Comsenz Inc.

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