绚丽的按钮导航（css3）实现

       终于搞好了，原来在博客园这里搞这东东这么难，这个是用CSS3实现的，现在只能运行于现代Chrome和firefox浏览器，不能运行于IE，并且在Chrome或者与其相同内核的现代浏览器下才能显示最好的效果。

注意：由于为了在随笔里可以显示效果，做了少许改动！

首先是html代码，十分简单

 

<div class="sample" style="display:block;">
 <ul id='cover'>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  </ul >
  <ul id="tab">
  <li>javascript</li>
  <li>Ajax</li>
  <li>Css</li>
  <li>html</li>
  <li>.net</li>
  <li>SQL</li>
  </ul>
 </div>

那个class为sample的div很诡异是吧，对了，无视他，那个只是让这个例子在博客园可以显示的一个小技巧而已，div内部的内容才是主要的，等下css也是，请无视。sample前缀吧~

 

这个比较简单，id='cover'的ul是用来做遮罩的，可以做出绚丽的按钮

下面是CSS，CSS在这里很重要，效果几乎都是它实现的

 

.sample ul {
list-style:none outside none;
margin:0;
padding:0;
position:absolute;
}
.sample li {
-moz-border-radius:10px 10px 10px 10px;
-webkit-border-radius:10px 10px 10px 10px;
border:1px solid white;
position:relative;
left:0;
top:0;
width:150px;
height:40px;
}
.sample #cover li {
background:-moz-linear-gradient(center top , white, transparent 60%) repeat scroll 0 0 transparent;
background:-webkit-gradient(linear, 0 0, 0 60%, from(#white), to(rgba(0,0,0,0)));
z-index:99;
}
.sample #cover li:hover {
left:-4px;
top:-4px;
}
.sample #tab li {
background-color:#DDDDDD;
text-align:center;
padding:auto;
}
.sample #tab li.hover {
-moz-box-shadow:4px 4px 1px #000000;
-webkit-box-shadow:4px 4px 1px #000000;
background-color:red;
left:-4px;
top:-4px;
}
.sample li,.sample #cover li?.sample ?cover li:hover ,.sample ?tab li ,.sample #tab li.hover
{-webkit-transition: background-color .25s linear,
-webkit-box-shadow .25s linear,
left .25s linear,
top .25s linear;}

里面用了一些某些浏览器专有的样式，所以说，不能在IE运行。。。其实呢，要在IE运行同样的效果是有可能的，不过我太懒了。。

 

这里运用了CSS3的透明，渐变，阴影这些在代码里面也很容易看得清

gradient是渐变，不过在两个内核里面，他们的参数有些区别。

box-shadow是阴影，如你们所见，他们也都是有专有前缀的。

rgba(0,0,0,0)是CSS3里面一种颜色表示法，和我们以前的RGB差不多，最后一个参数是指定透明程度的，0为完全透明，1为不透明

 

那-webkit-transition这个是啥呢，这个叫转换。。大概，不过现在火狐是不支持这个的，所以我才说要看最好的效果要在webkit核心的浏览器看才行，保证华丽。

 

因为我用一个ul遮住了原本的ul，所以在Chrome和firefox里貌似不能触发被盖住的那个ul的事件，所以我有js解决了这个问题~

var cover=document.getElementById("cover");
var tab=document.getElementById("tab");

var coverlis=cover.childNodes;
var tablis=tab.childNodes;
for(var i=coverlis.length-1;i>=0;i--)
{

coverlis[i].onmouseover=function(event){hover(event,coverlis,tablis,"hover");}
coverlis[i].onmouseout=function(event){hover(event,coverlis,tablis,"");}

}


function hover(event,coverlis,tablis,className)
{
var oEvent=(event)?event:window.event;
var oElem;
if(className!=""){
 oElem = oEvent.toElement ? oEvent.toElement : oEvent.currentTarget;
}
else
{oElem = oEvent.fromElement ? oEvent.fromElement : oEvent.currentTarget;
}
for(var i=coverlis.length-1;i>=0;i--)
{
if(coverlis[i]==oElem){tablis[i].className=className;}
}


}

 

贴上来的代码只要稍微改动一下就可以在你们自己的电脑上试试了，因为代码为了在随笔里可以运行，做了一些改动，十分难看。。

 

 

• javascript
• Ajax
• Css
• html
• .net
• SQL