武林網(www.49028c.com)文章簡介：通過CSS3最新的過渡（transition）和動畫（animation）兩個功能實現鼠標懸停時的動畫效果。我們用同樣的元素做出了9種不同的效果。

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

演示 下載

示例中所用的圖標實際上是一種網絡符號字體，包含在@font-face。這種字體是有Just Be Nice工作室所開發。

標記

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

因為我們使用符號字體作為圖標，我們為圖標寫上字母。

CSS

所有示例中的共有的樣式都包含符號字體：

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

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

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

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

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

注意：以下示例中，我不會寫任何瀏覽器特定的前綴，但是你會在示例文件夾中看到所有必要前綴。

示例1

在示例1的堆疊菜單中，可實現各個元素的大小，以及各個菜單項的背景顏色的改變。

為列表項定義樣式：

過渡效果適合所有屬性，因為鼠標移上時，邊框顏色和背景色都會發生相應的變化。