基于CSS3的照片墻的設(shè)計(jì)與實(shí)現(xiàn)

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

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

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

1 照片墻功能描述

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

2 實(shí)現(xiàn)方法

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

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

然后，設(shè)置照片以不同的位置和旋轉(zhuǎn)角度隨意擺放，這需要用到兩個(gè)知識(shí)：使用絕對(duì)定位position:absolute將照片放在不同的位置，使用css3屬性transform：rotate()，將各個(gè)照片旋轉(zhuǎn)不同的角度。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;}/*設(shè)置照片的公共樣式：內(nèi)邊距、背景、邊框、陰影、定位*/

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

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

2.2 鼠標(biāo)經(jīng)過(guò)照片的動(dòng)畫(huà)制作

鼠標(biāo)移到照片上，照片緩慢旋轉(zhuǎn)、放大并顯示在最上層，其原理如下：

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

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

③使用css3屬性transition，將以上的變化設(shè)置為在一定時(shí)間內(nèi)完成，從而達(dá)到緩慢變化的效果。

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

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 結(jié)束語(yǔ)

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

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