用CSS3打造獨具創意的動畫菜單效果

CSS3新增添了實現動畫效果的新功能，通過本文，你可以對這些新功能有個初步瞭解。本文將為大家帶來一些充滿創意的菜單懸停效果。它由表徵圖，主標 題，副標題等簡單的元素構成，通過CSS3最新的過渡（transition）和動畫（animation）兩個功能實現滑鼠移至上方時的動畫效果。我們用同 樣的元素做出了9種不同的效果。

示範 下載

樣本中所用的表徵圖實際上是一種網路符號字型，包含在@font-face。這種字型是有Just Be Nice工作室所開發。

標記

菜單的HTML架構是一個無序列表，其中的每個選項都是由表徵圖跨度和內容層組成的連結元素。內容層包含主標題和副標題：

因為我們使用符號字型作為表徵圖，我們為表徵圖寫上字母。

CSS

所有樣本中的共有的樣式都包含符號字型：

檔案的路徑是相對於CSS檔案而言的，因此，它們應放在css目錄下的websymbols中（css/websymbols/）。

用表徵圖作為字型的好處在於，可以為它運用漂亮的效果，比如說，文本投影（text shadow）。還可以根據需求按比例放大或縮小。

每個樣本中的無序列表樣式都相同。我們只是讓它的寬度適合，方便其居於螢幕中央：

在下面的樣本中，會向大家展示元素的樣式是如何為最終效果服務的。

在第1個樣本中，我們會研究所有元素的樣式，其它樣本，我們側重對代碼進行改寫。

注意：以下樣本中，我不會寫任何瀏覽器特定的首碼，但是你會在樣本檔案夾中看到所有必要首碼。

樣本1