陳紀霞
摘要: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;
} /* 溢出的部分隱藏 */……p>