欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用CSS3創(chuàng)建動態(tài)菜單效果

WEB開發(fā)者   發(fā)布時間：2015-07-10 15:59:07   作者：佚名   我要評論
這篇文章主要介紹了使用CSS3創(chuàng)建動態(tài)菜單效果,可以先看文中開頭demo演示的效果,需要的朋友可以參考下

　該教程，我們將討論CSS3的一些新功能和新特性，并教你在不使用圖片和JavaScript的情況下，如何制作酷炫的圓形導(dǎo)航菜單。該實例將用到CSS3的新特性： border-radius和animation。

2015710155522789.jpg (401×245)
　Demo演示

第一步：編輯菜單的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. }  

　　如下圖：
2015710154701055.jpg (500×258)

第三步：利用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. }  

　　菜單看起來呈下面樣子：
2015710155427772.jpg (500×275)

第四步：設(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)在菜單看起來呈下面樣子：
2015710155130736.jpg (500×269)

第五步：設(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)階段的樣子：

2015710155156656.jpg (500×267)

第六步：定義另一種效果，當(dāng)鼠標(biāo)懸浮在鏈接上時進行展現(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. }  

　　菜單樣式如圖：
2015710155217940.jpg (500×273)

第七步：最后為導(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)生的動畫效果：
2015710155238872.jpg (500×304)

結(jié)論

　　通過上面教程，你已經(jīng)學(xué)到如何制作酷的動畫菜單。在制作過程中不需要使用JavaScript和圖片，只需要使用CSS3的一些酷的特性即可。該菜單可以完美地運行于Chrome和Safari瀏覽器。在Firefox瀏覽器中，無法看到動畫效果。

相關(guān)文章

  • CSS3 最強二維布局系統(tǒng)之Grid 網(wǎng)格布局

    CS3的Grid網(wǎng)格布局是目前最強的二維布局系統(tǒng),可以同時對列和行進行處理,將網(wǎng)頁劃分成一個個網(wǎng)格,可以任意組合不同的網(wǎng)格,做出各種各樣的布局，本文介紹CSS3 最強二維布局系
    2025-02-27

  • 如何使用CSS3實現(xiàn)波浪式圖片墻

    本文介紹了如何使用CSS3的transform屬性和動畫技巧實現(xiàn)波浪式圖片墻,通過設(shè)置圖片的垂直偏移量,并使用動畫使其周期性地改變位置,可以創(chuàng)建出動態(tài)且具有波浪效果的圖片墻,同
    2025-02-27

  • CSS3模擬實現(xiàn)一個雷達(dá)探測掃描動畫特效(最新推薦)

    文章介紹了如何使用CSS3實現(xiàn)一個雷達(dá)探測掃描的效果,包括夜色背景、蜘蛛網(wǎng)盤、掃描體的轉(zhuǎn)動效果、尾巴陰影以及被掃描到的光點,通過HTML和CSS的配合,實現(xiàn)了豐富的動畫效果,
    2025-02-21

  • css3 display:flex 彈性盒模型的使用方法

    CSS3的Flexbox是一種強大的布局模式,通過設(shè)置display:flex可以輕松實現(xiàn)對齊、排列和分布網(wǎng)頁元素,它解決了傳統(tǒng)布局方法中的對齊、間距分配和自適應(yīng)布局等問題,接下來通過本
    2025-02-19

  • css3 實現(xiàn)icon刷新轉(zhuǎn)動效果

    本文給大家介紹css3 實現(xiàn)icon刷新轉(zhuǎn)動效果，文章開頭給大家介紹了webkit-transform、animation、@keyframes這三個屬性，結(jié)合實例代碼給大家介紹的非常詳細(xì)，感興趣的朋友一
    2025-02-19

  • CSS3動態(tài)效果之過渡屬性(最新推薦)

    CSS3過渡屬性用于實現(xiàn)元素從一種樣式平滑過渡到另一種樣式,通過設(shè)置transition-property過渡屬性、transition-duration過渡時長transition-timing-function過渡函數(shù)和trans
    2025-02-19

  • CSS3實現(xiàn)動態(tài)旋轉(zhuǎn)加載樣式的示例代碼

    本文介紹了如何使用CSS3創(chuàng)建一個簡單的動態(tài)旋轉(zhuǎn)加載樣式,通過定義一個帶有類名“l(fā)oader”的HTML元素,并使用CSS樣式和@keyframes規(guī)則來實現(xiàn)旋轉(zhuǎn)動畫,你可以根據(jù)需要調(diào)整樣式
    2025-02-19

  • 使用CSS3實現(xiàn)平滑的過渡動畫效果(實例代碼)

    這篇文章主要介紹了如何使用CSS3的transition屬性實現(xiàn)平滑的過渡動畫，本文通過實例代碼給大家介紹的非常詳細(xì)，感興趣的朋友一起看看吧
    2025-02-13

  • CSS3中使用flex和grid實現(xiàn)等高元素布局的示例代碼

    本文介紹了使用CSS3中的Flexbox和Grid布局實現(xiàn)等高元素布局的方法,通過簡單的兩列實現(xiàn)、每行放置3列以及全部代碼的展示,展示了這兩種布局方式的實現(xiàn)細(xì)節(jié)和效果，感興趣的朋
    2025-02-11

  • 使用CSS3和SVG創(chuàng)建圓形進度條動畫效果

    CSS3和SVG的結(jié)合使用為網(wǎng)頁設(shè)計帶來了創(chuàng)新的動態(tài)視覺效果,本文通過一個圓形進度條的動畫特效示例,展示了如何利用CSS3的動畫功能和SVG的矢量圖形能力來創(chuàng)建豐富的用戶交互體
    2024-10-24

最新評論