基于CSS3的圖片畫廊的設計與實現

陳紀霞

摘要：CSS3的出現給WEB開發帶來了革命性的影響，以前很多需要javascript實現的復雜效果，現在使用簡單的CSS3就能實現。該文就利用CSS3實現了一個絢麗的圖片畫廊效果。

關鍵詞：CSS3；圖片畫廊； 變形；動畫

中圖分類號： TP302.1 文獻標識碼：A 文章編號：1009-3044（2014）17-4115-03

在網頁設計中，適當地使用動畫或者漸變，可以把網頁設計得更加生動和友好。在傳統的設計中，通常會借助Flash或者JavaScript來實現動畫，借助圖片實現漸變，而CSS僅僅是靜態地表現元素的效果。不過CSS3的出現將改變我們的思維方式，因為動畫和漸變也可以直接用CSS3來實現。這些革命性的改變，使得CSS具有更強大的功能。

本文充分利用CSS3新增的transform屬性，實現元素的旋轉、縮放、移動、傾斜等變形效果，打破傳統中規中舉的排版局限，模擬一個圖片畫廊，隨意地擺放，還原一種真實的感覺。

1 功能描述

該圖片畫廊在一個限定的區域范圍內，擺放若干張圖片，每張圖片都有不同程度的旋轉，并指定旋轉的原點。鼠標經過圖片時，圖片會調整至正常的角度并放大顯示；鼠標離開后，又會還原為原來的狀態。在Firefox瀏覽器下預覽的界面效果，如下圖所示。

圖1 圖片畫廊 圖2 鼠標經過效果

2 實現方法

2.1 設計網頁元素

在網頁中以無序列表的形式添加幾張圖片，并為ul添加類選擇器thumb ，HTML代碼如下：

2.2 設計基本的樣式表

基本的樣式表包括背景墻樣式的設計和整體尺寸布局，鏈接顯示為塊級元素，以方便變形和布局。

html， body， ul.thumb， ul.thumb li {

padding： 0；

margin： 0；

} /* 將各元素的外邊距和內邊距都設置為0 */

html， body， ul.thumb {

width： 100%；

height： 100%；

overflow： hidden；

} /* 溢出的部分隱藏 */