CSS实现点击链接后下沉效果

在网页的网站名字或者题目链接处用css的方法,使得在点击这些链接时,被点击的链接有下沉的效果,让网页更具动感,增强用户体验。

实现的方法很简单,只要给a的active定义css就好了,如下例子:

#logo a{position:relative;display:block;width:240px;height:44px;background:#333;}
#logo a:active{top:1px;left:1px;zoom:1;}

上面css比较关键的地方在position:relative;没有这个就出不来效果。配上html就可以测试了。

<!DOCTYPE HTML>
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <meta http-equiv="content-type" content="text/html;charset=uft-8">
  <META NAME="Description" CONTENT="">
  <style>
  #logo a{position:relative;width:240px;height:44px;background:#333;display:block;}#logo a:active{top:1px;left:1px;zoom:1;}
  </style>
 </HEAD>
 <BODY>
  <div id="logo"><a href="/">ggg</a></div>
 </BODY>
</HTML>

上面的方法ie6下效果不大好,jquery就不会有不兼容的问题。当然,可以把css中的active换成hover……这个用的人比较多就不说了。

相关阅读
发表评论

电子邮件地址不会被公开。 必填项已用*标注