css学习_链接的流动下划线效果
Sunday, 12. November 2006, 05:57:20
这是一个有趣的链接效果,当你把鼠标移到链接上时,链接下会出现一道流动的线条。
你只需在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;
}
示例
你只需在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;
}
示例













