該教程，我們將討論css3的一些新功能和新特性，並教你在不使用和j**ascript的情況下，如何製作酷炫的圓形導航選單。該例項將用到css3的新特性： border-radius和animation。
demo演示
第一步：編輯選單的html**
選單包含三個列表項，分別取名為「menu1」、「menu2」、「menu3」。
xml/html code複製內容到剪貼簿
第二步：設定選單的背景
在該步驟中，我們將把導航的背景設定為黑色。寬度、高度和內邊距為可選項，可以不設定。
css code複製內容到剪貼簿
如下圖：
第三步：利用border-radius，製作圓形導航。
該步中，我們會利用css3的一些酷的功能，尤其是border-radius ，將每個列表項的背景設定為黃色，形狀為圓形。
css code複製內容到剪貼簿
程式設計客棧
選單看起來呈下面樣子：
第四步：設定選單的對齊方式
本步驟中，我們將為每個列表項設定特定的背景顏色與位置：
css code複製內容到剪貼簿
現在選單看起來呈下面樣子：
第五步：設定選單中鏈結的對齊方式
css code複製內容到剪貼簿
選單現階段的樣子：
第六步：定義另一種效果，當滑鼠懸浮在鏈結上時進行展現
css code複製內容到剪貼簿
選單樣式如圖：
第七步：最後為導航增加動畫效果
css code複製內容到剪貼簿
選單所產生的動畫效果：
結論通過上面教程，你已經學到如何製作酷的動畫選單。在製作過程中不需要使用j**ascript和，只需要使用css3的一些酷的特性即可。該選單可以完美地執行於chrome和safari瀏覽器。在firefox瀏覽器中，無法看到動畫效果。
本文標題: 使用css3建立動態選單效果
本文位址:
使用CSS3製作loading效果
使用了keyframes來使動畫反覆迴圈，在webkit核心瀏覽器下表現的很好，目前是webkit only，火狐也請繞道吧。下面放主要 和demo，一demo勝千言啊。主要樣式 x loading spinner x loading spinner span x loading spinner s...
css3 濾鏡效果
色相旋轉 曾經和photoshop色相 飽和度面板打過交道嗎？現在好了，你可以在瀏覽器中應用它。img 如果對這個度數值如何設定感到困惑，可以試想一下乙個色輪。您指定的度數值決定了該輪停止之處。這意味著 0deg將不會有任何效果，而50deg會相應的轉動撥盤。在這種情況下，nettuts 的標誌將採...
Css3 動畫效果
相關作品 最近看了比較多的動畫效果，想做些自己感興趣的作品，遇到以下問題，記錄下來 1.簡單的動畫主要用transition和transform 2.滑鼠放上去產生的效果，before和after顯示寫法如下 item style3 hover before 3.關於3d動畫效果，要顯示出來，需要新...