不用圖片和JS 照樣建立絢麗的動態CSS3選單

csdn發表於2013-07-19
JSCSSS3

　　該教程，我們將討論CSS3的一些新功能和新特性，並教你在不使用圖片和JavaScript的情況下，如何製作酷炫的圓形導航選單。該例項將用到CSS3的新特性： border-radius和animation。

不用圖片和JS 照樣建立絢麗的動態CSS3選單

　　Demo演示  下載程式碼

　　第一步：編輯選單的HTML程式碼

　　選單包含三個列表項，分別取名為“Menu1”、“Menu2”、“Menu3”。

<div class="css3Menus">  
<ul>  
    <li>Menu1</li>  
    <li>Menu2</li>  
    <li>Menu3</li>  
</ul>  
</div>

　　第二步：設定選單的背景

　　在該步驟中，我們將把導航的背景設定為黑色。寬度、高度和內邊距為可選項，可以不設定。

.css3Menus {  
background: #14080a;  
width:506px;  
height:260px;  
padding:20px;  
}

　　如下圖：

不用圖片和JS 照樣建立絢麗的動態CSS3選單

　　第三步：利用border-radius，製作圓形導航。

　　該步中，我們會利用CSS3的一些酷的功能，尤其是border-radius ，將每個列表項的背景設定為黃色，形狀為圓形。 

ul {  
list-style: none;  
}  

li {  
float:left;  
font: 14px/10px Arial, Verdana, sans-serif;  
color:#FFF;  
background-color:#CCCC00;  
width: 80px;  
height: 80px;  
padding:20px;  
margin:0 30px 0 0;  
-webkit-border-radius: 60px;  
-moz-border-radius: 60px;  
border-radius: 60px;  
}

　　選單看起來呈下面樣子：

不用圖片和JS 照樣建立絢麗的動態CSS3選單

　　第四步：設定選單的對齊方式

　　本步驟中，我們將為每個列表項設定特定的背景顏色與位置：

li#menu1 {  
background-color: #00FFCC;  
}  
li#menu2 {  
background-color: #CC9900;  
margin-top:100px;  
}  
li#menu3 {  
background-color: #33FF66;  
margin-top:50px;  
}

　　現在選單看起來呈下面樣子：

不用圖片和JS 照樣建立絢麗的動態CSS3選單

　　第五步：設定選單中連結的對齊方式

li a {  
color:#FFF;  
text-decoration:none;  
display:block;  
width: 80px;  
height: 45px; text-align: center;  
padding:35px 0 0 0;  
margin:0 40px 0 0;  
-webkit-border-radius: 40px;  
-moz-border-radius: 40px;  
border-radius: 40px;  
}  
li#menu1 a {  
background-color: #FF0000;  
}  
li#menu2 a {  
background-color: #660033;  
}  
li#menu3 a {  
background-color: #66CCCC;  
}

　　選單現階段的樣子：

不用圖片和JS 照樣建立絢麗的動態CSS3選單

　　第六步：定義另一種效果，當滑鼠懸浮在連結上時進行展現 

li a:hover,  
li a:focus,  
li a:active {  
width: 120px;  
height:65px;  
padding:55px 0 0 0;  
margin:-20px 0 0 -20px;  
-webkit-border-radius: 60px;  
-moz-border-radius: 60px;  
border-radius: 60px;  
}

　　選單樣式如圖：

不用圖片和JS 照樣建立絢麗的動態CSS3選單

　　第七步：最後為導航增加動畫效果

li a:hover,  
li a:focus,  
li a:active {  
-webkit-animation-name:bounce;  
-webkit-animation-duration:1s;  
-webkit-animation-iteration-count:4;  
-webkit-animation-direction:alternate;  
}  
@-webkit-keyframes bounce{from{margin:0 40px 0 0;}  
to{margin:120px 40px 0 0;}  
}

　　選單所產生的動畫效果：

不用圖片和JS 照樣建立絢麗的動態CSS3選單

　　結論

　　通過上面教程，你已經學到如何製作酷的動畫選單。在製作過程中不需要使用JavaScript和圖片，只需要使用CSS3的一些酷的特性即可。該選單可以完美地執行於Chrome和Safari瀏覽器。在Firefox瀏覽器中，無法看到動畫效果。

　　原文來自：Web Revisions

相關文章