猫喵 - [CSS笔记]链接的流动下划线效果

[CSS笔记]链接的流动下划线效果

Saturday, 11. November 2006, 12:10:26

这是一个有趣的链接效果，当你把鼠标移到链接上时，链接下会出现一道流动的线条。

点这里查看示范效果

你只需在CSS文件中加入下面的代码就可以实现这个效果：

a:link {
color: #C37108;
white-space: nowrap;
text-decoration: none;
}

a:visited {
text-decoration: none;
color: #C37108;
}

a:hover {
text-decoration: none;
background-image: url(http://files.myopera.com/z8519312/images/animated_underline.gif);
background-repeat: repeat-x;
background-position: 100% 100%;
padding-bottom: 3px;
color: #CC9900;
}

a:active {
text-decoration: none;
}