CSS3中怎么創(chuàng)建一個動態(tài)菜單效果

本篇文章為大家展示了CSS3中怎么創(chuàng)建一個動態(tài)菜單效果，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

第一步：編輯菜單的HTML代碼

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

XML/HTML Code復(fù)制內(nèi)容到剪貼板

1. <div class="css3Menus">     

2. <ul>     

3.     <li>Menu1</li>     

4.     <li>Menu2</li>     

5.     <li>Menu3</li>     

6. </ul>     

7. </div>  

　　第二步：設(shè)置菜單的背景

　　在該步驟中，我們將把導(dǎo)航的背景設(shè)置為黑色。寬度、高度和內(nèi)邊距為可選項，可以不設(shè)置。
 

CSS Code復(fù)制內(nèi)容到剪貼板

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，制作圓形導(dǎo)航。

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

CSS Code復(fù)制內(nèi)容到剪貼板

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. }  

　　菜單看起來呈下面樣子：

第四步：設(shè)置菜單的對齊方式

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

CSS Code復(fù)制內(nèi)容到剪貼板

1. li#menu1 {     

2. background-color: #00FFCC;     

3. }     

4. li#menu2 {     

5. background-color: #CC9900;     

6. margin-top:100px;     

7. }     

8. li#menu3 {     

9. background-color: #33FF66;     

10. margin-top:50px;     

11. }  

　　現(xiàn)在菜單看起來呈下面樣子：

第五步：設(shè)置菜單中鏈接的對齊方式
 

CSS Code復(fù)制內(nèi)容到剪貼板

1. li a {     

2. color:#FFF;     

3. text-decoration:none;     

4. display:<span style="width: auto; height: auto; float: none;" id="2_nwp"><a style="text-decoration: none;" mpid="2" 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=block&k0=block&kdi0=0&luki=7&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="2_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">block</span></a></span>;     

5. width: 80px;     

6. height: 45px; text-align: center;     

7. padding:35px 0 0 0;     

8. margin:0 40px 0 0;     

9. -webkit-border-radius: 40px;     

10. -moz-border-radius: 40px;     

11. border-radius: 40px;     

12. }     

13. li#menu1 a {     

14. background-color: #FF0000;     

15. }     

16. li#menu2 a {     

17. background-color: #660033;     

18. }     

19. li#menu3 a {     

20. background-color: #66CCCC;     

21. }  

　　菜單現(xiàn)階段的樣子：

第六步：定義另一種效果，當(dāng)鼠標(biāo)懸浮在鏈接上時進(jìn)行展現(xiàn) 
 

CSS Code復(fù)制內(nèi)容到剪貼板

1. li a:hover,     

2. li a:focus,     

3. li a:active {     

4. width: 120px;     

5. height:65px;     

6. padding:55px 0 0 0;     

7. margin:-20px 0 0 -20px;     

8. -webkit-border-radius: 60px;     

9. -moz-border-radius: 60px;     

10. border-radius: 60px;     

11. }  

　　菜單樣式如圖：

第七步：最后為導(dǎo)航增加動畫效果
 

CSS Code復(fù)制內(nèi)容到剪貼板

1. li a:hover,     

2. li a:focus,     

3. li a:active {     

4. -webkit-animation-name:bounce;     

5. -webkit-animation-duration:1s;     

6. -webkit-animation-iteration-count:4;     

7. -webkit-animation-direction:alternate;     

8. }     

9. @-webkit-keyframes bounce{<span style="width: auto; height: auto; float: none;" id="1_nwp"><a style="text-decoration: none;" mpid="1" 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=from&k0=from&kdi0=0&luki=2&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="1_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">from</span></a></span>{margin:0 40px 0 0;}     

10. to{margin:120px 40px 0 0;}     

11. }  

　　菜單所產(chǎn)生的動畫效果：

上述內(nèi)容就是CSS3中怎么創(chuàng)建一個動態(tài)菜單效果，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注億速云行業(yè)資訊頻道。