使用CSS3创建动态菜单效果

　该教程，我们将讨论CSS3的一些新功能和新特性，并教你在不使用图片和JavaScript的情况下，如何制作酷炫的圆形导航菜单。该实例将用到CSS3的新特性： border-radius和animation。

　Demo演示

第一步：编辑菜单的HTML代码

　　菜单包含三个列表项，分别取名为“Menu1”、“Menu2”、“Menu3”。
 

1. <div class="css3Menus">     
2. <ul>     
3.     <li>Menu1</li>     
4.     <li>Menu2</li>     
5.     <li>Menu3</li>     
6. </ul>     
7. </div>  

　　第二步：设置菜单的背景

　　在该步骤中，我们将把导航的背景设置为黑色。宽度、高度和内边距为可选项，可以不设置。
 

1. .<span style="width: auto; height: auto; float: none;" id="4_nwp"><a style="text-decoration: none;" mpid="4" target="_blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=e2fbae28688be8a0&k=css3&k0=css3&kdi0=0&luki=10&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=a0e88b6828aefbe2&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F2453%2Ehtml&urlid=0" id="4_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">css3</span></a></span>Menus {     
2. background: #14080a;     
3. width:506px;     
4. height:260px;     
5. padding:20px;     
6. }  

　　如下图：

第三步：利用border-radius，制作圆形导航。

　　该步中，我们会利用CSS3的一些酷的功能，尤其是border-radius ，将每个列表项的背景设置为黄色，形状为圆形。 
 

1. ul {     
2. list-style: none;     
3. }     
4.     
5. li {     
6. float:left;     
7. font: 14px/10px Arial, Verdana, sans-serif;     
8. color:#FFF;     
9. background-color:#CCCC00;     
10. width: 80px;     
11. height: 80px;     
12. padding:20px;     
13. margin:0 30px 0 0;     
14. -webkit-border-radius: 60px;     
15. -moz-border-radius: 60px;     
16. border-radius: 60px;     
17. }