基于CSS3的照片墻的設計與實現(xiàn)

高娟 張衛(wèi)清 崔艷萍

CSS3作為層疊樣式表的最新版本，新增了諸多特性，運用CSS3新特性，我們可以不用專門的圖片處理軟件、JavaScript代碼以及Flash動畫就可以實現(xiàn)陰影、漸變、圓角、顏色透明度、變形、動畫等精美的網(wǎng)頁顯示效果。

本文利用CSS3新增的transform屬性和transition屬性，實現(xiàn)照片的旋轉、縮放等變形效果和動畫快慢等動畫過渡效果，模擬一個照片墻，隨意擺放，還原一種真實感受。

1 照片墻功能描述

默認狀態(tài)下，照片隨意的擺放在頁面的不同位置，并且都有不同角度的傾斜和相互遮擋，當鼠標移動到某一張照片上時，此照片緩慢的由傾斜狀態(tài)轉變?yōu)槎苏隣顟B(tài)，并且放大一定比例顯示在最上面，鼠標移走后，又恢復為原狀態(tài)。

2 實現(xiàn)方法

2.1 靜態(tài)照片墻的制作

首先，在網(wǎng)頁中添加一個div容器，在容器中添加image標簽放入照片，html代碼如下：

然后，設置照片以不同的位置和旋轉角度隨意擺放，這需要用到兩個知識：使用絕對定位position:absolute將照片放在不同的位置，使用css3屬性transform：rotate()，將各個照片旋轉不同的角度。CSS代碼如下：

.container{width:960px; height:450px;margin:60px auto; position:relative;}

.container img{padding:10px 10px 15px;background:white; border:1px solid #ddd;boxshadow:2px 2px 3px; position:absolute;z-index:1;}/*設置照片的公共樣式：內邊距、背景、邊框、陰影、定位*/

.pic1{left:400px;top:0;-webkit-transform:rotate(-5deg);-moz-transform:rotate(-5deg);transform:rotate(-5deg);}/*設置每張圖片特有的樣式：位置、初始旋轉角度*/

.pic2{top:0;left:600px;-webkittransform:rotate(-20deg);-moz-transform:rotate(-20deg);transform:rotate(-20deg);}/*后面的照片參照照片1改變參數(shù)即可*/

2.2 鼠標經(jīng)過照片的動畫制作

鼠標移到照片上，照片緩慢旋轉、放大并顯示在最上層，其原理如下：

①使用css3屬性transform：rotate(0deg)，可以將傾斜的照片角度旋轉為0，即把照片旋轉端正。

②使用css3屬性transform：scale()，將照片放大一定比例。

③使用css3屬性transition，將以上的變化設置為在一定時間內完成，從而達到緩慢變化的效果。

④設置了絕對定位的元素可以通過z-index屬性控制其顯示的層次關系。將要顯示在最上層的照片的z-index值設置得比其他照片大即可。

CSS代碼如下：

container img:hover{-webkittransform:rotate(0deg) scale(1.50);-moztransform:rotate(0deg) scale(1.50);transform:rotate(0 deg)scale(1.50);-webkit-transition:all 0.5s ease-in;-moz-transition:all 0.5s ease-in;transition:all 0.5s ease-in;z-index:2;}

3 結束語

本文所設計的照片墻效果主要使用CSS3的transition、transform、rotate、scale等屬性實現(xiàn)。在不使用任何JavaScript的前提下，用純CSS極方便的實現(xiàn)了甚至JavaScript都無法實現(xiàn)的復雜的照片墻特效，包括圖片的緩慢旋轉、放大等，這就是CSS3的魅力所在。相信大家在使用CSS3的過程中不斷探索，一定可以制作出更加豐富絢麗的Web應用。

[1]陳紀霞.電腦知識與技術[J].基于CSS3的圖片畫廊的設計與實現(xiàn)，2014年第6期