前端開發推薦 建立CSS3漂亮的動畫選單

使用css3可以打造出非常漂亮的導航效果，在今天的教程中我將建立選單項懸停效果，很容易地通過編輯 css 檔案進行自定義，沒有使用任何影象,

我會在水平和垂直位置的背景按鈕進行動畫處理。當你把滑鼠移到選單項的時間，將會湧現非常膩滑的滑動結果，下面就一路來看看這個簡樸美麗的css3動畫選單吧。

選單結構是相當簡單的。

我們將使用乙個無序的列表項。

您可以使用它從谷歌的字型庫。

此外可以瀏覽庫並選擇適合你的總體設計的其他字型。

1

<
ul class
="demo1"
>
2<
li><
a href
="#"
>home
a>
li>
3<
li><
a href
="#"
>services
a>
li>
4<
li><
a href
="#"
>gallery
a>
li>
5<
li><
a href
="#"
>about
a>
li>
6<
li><
a href
="#"
>contact
a>
li>7ul
>

example 1

第乙個示例中，我們將設定每個選單項的背景寬度。

寬度值會 0 表示處於正常狀態的元素，並賦予乙個 50%在懸停狀態的值。

根據您的需要，您可以更改此值。

1

.demo1 li 

1

.demo1 li:hover 

第二個例子是與第乙個非常相同。

只更改背景。

.demo2

在此示例中在瀏覽器的頁的頂部，

把高度屬性

新增動畫效果。

若要建立乙個色彩鮮豔的選單，您可以為每個選單項以不同的顏色。

1

.demo3 li 
1415
.demo3 li:hover 

此示例中的結構有點不同，因為我們將使用乙個 div 作為專業的頁面動畫布局。

1

<
ul class
="demo4"
>
2<
li><
div 
class
="link"
><
a href
="#"
>home
a>
div><
div 
class
="mask"
>
div>
li>
3<
li><
div 
class
="link"
><
a href
="#"
>services
a>
div><
div 
class
="mask"
>
div>
li>
4<
li><
div 
class
="link"
><
a href
="#"
>gallery
a>
div><
div 
class
="mask"
>
div>
li>56
<
div 
class
="column-clear"
>
div>7ul
>

1

.demo4 li 

1

.demo4 li .mask 
20.demo4 li:hover .mask 

css3實現漂亮的倒影效果

實際上還有很多css新屬性並未包含進css3官方標準中。webkit box reflect屬性就是以谷歌瀏覽器為代表的webkit渲染引擎獨有的特徵。webkit box reflect的作用是讓出現倒影。html css樣式 img效果 如果希望倒影和之間有空隙可是設定css樣式 img效果如圖...

《前端》css3動畫效果

語法 transform none transform functions translatex x 定義轉換，只是用 x 軸的值。translatey y 定義轉換，只是用 y 軸的值。translatez z 定義 3d 轉換，只是用 z 軸的值。rotatex angle 定義沿著 x 軸的 ...

Web前端開發 CSS3之3D變換

2d變換僅是在電腦螢幕平面的變換，而3d變換則是空間三個方向的變換，可以是單個方向，也可以三個方向組合，3d變換用的也是transform屬性，不同的是rotate 要加上單個方向的軸系如rotatex 同時在3d變換時需要使用transform style屬性宣告使用的是 3d變換，為了讓視覺更好...