超酷 CSS3/HTML5 3D 飄帶菜單實現教程

今天我們來介紹一款很有創意的CSS3/HTML5菜單，首先菜單是飄帶形狀的，看起來很優雅，這種菜單在個人博客中用的比較多，不僅干凈利落，而且很具有個性化。另外，這款菜單在鼠標滑過菜單項時，將會出現3D的凸起效果，並且會改變菜單項的背景顏色，效果非常的酷，你可以從在線演示中查看這一效果。

你也可以在這里查看在線演示

下面我們來一起看看實現這款CSS3飄帶菜單的具體過程以及源代碼。源碼主要由HTML代碼和CSS代碼組成，還比較簡單。

HTML代碼：

<div class=’ribbon’>
<a href=’#'><span>Home</span></a>
<a href=’#'><span>About</span></a>
<a href=’#'><span>Services</span></a>
<a href=’#'><span>Contact</span></a>
</div>

看HTML代碼非常簡單，幾個a標簽就把菜單的結構描述清楚了，當然主要還是看CSS代碼。

CSS代碼：

.ribbon {
display:inline-block;
}

.ribbon:after, .ribbon:before {
margin-top:0.5em;
content: “”;
float:left;
border:1.5em solid #fff;
}

.ribbon:after {
border-right-color:transparent;
}

.ribbon:before {
border-left-color:transparent;
}

.ribbon a:link, .ribbon a:visited {
color:#000;
text-decoration:none;
float:left;
height:3.5em;
overflow:hidden;
}

.ribbon span {
background:#fff;
display:inline-block;
line-height:3em;
padding:0 1em;
margin-top:0.5em;
position:relative;

-webkit-transition: background-color 0.2s, margin-top 0.2s; /* Saf3.2+, Chrome */
-moz-transition: background-color 0.2s, margin-top 0.2s; /* FF4+ */
-ms-transition: background-color 0.2s, margin-top 0.2s; /* IE10 */
-o-transition: background-color 0.2s, margin-top 0.2s; /* Opera 10.5+ */
transition: background-color 0.2s, margin-top 0.2s;
}

.ribbon a:hover span {
background:#FFD204;
margin-top:0;
}

.ribbon span:before {
content: “”;
position:absolute;
top:3em;
left:0;
border-right:0.5em solid #9B8651;
border-bottom:0.5em solid #fff;
}

.ribbon span:after {
content: “”;
position:absolute;
top:3em;
right:0;
border-left:0.5em solid #9B8651;
border-bottom:0.5em solid #fff;
}

這里我們又一次應用了CSS3的:before和:after偽類對象，設置了菜單項前后的內容，並做了樣式渲染，實現了鼠標滑過菜單項出現凸起的立體效果。

好了，就這么簡單，你可以下載源代碼去試試，或者修改一些參數看看其中的奧妙在哪里。源碼下載>>