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

LMS
折腾
1.5K+ 0

在网页的网站名字或者题目链接处用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……这个用的人比较多就不说了。

THE END

发表评论

Submit