基于CSS3的圖片畫(huà)廊的設(shè)計(jì)與實(shí)現(xiàn)

陳紀(jì)霞

摘要：CSS3的出現(xiàn)給WEB開(kāi)發(fā)帶來(lái)了革命性的影響，以前很多需要javascript實(shí)現(xiàn)的復(fù)雜效果，現(xiàn)在使用簡(jiǎn)單的CSS3就能實(shí)現(xiàn)。該文就利用CSS3實(shí)現(xiàn)了一個(gè)絢麗的圖片畫(huà)廊效果。

關(guān)鍵詞：CSS3；圖片畫(huà)廊； 變形；動(dòng)畫(huà)

中圖分類號(hào)： TP302.1 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2014）17-4115-03

在網(wǎng)頁(yè)設(shè)計(jì)中，適當(dāng)?shù)厥褂脛?dòng)畫(huà)或者漸變，可以把網(wǎng)頁(yè)設(shè)計(jì)得更加生動(dòng)和友好。在傳統(tǒng)的設(shè)計(jì)中，通常會(huì)借助Flash或者JavaScript來(lái)實(shí)現(xiàn)動(dòng)畫(huà)，借助圖片實(shí)現(xiàn)漸變，而CSS僅僅是靜態(tài)地表現(xiàn)元素的效果。不過(guò)CSS3的出現(xiàn)將改變我們的思維方式，因?yàn)閯?dòng)畫(huà)和漸變也可以直接用CSS3來(lái)實(shí)現(xiàn)。這些革命性的改變，使得CSS具有更強(qiáng)大的功能。

本文充分利用CSS3新增的transform屬性，實(shí)現(xiàn)元素的旋轉(zhuǎn)、縮放、移動(dòng)、傾斜等變形效果，打破傳統(tǒng)中規(guī)中舉的排版局限，模擬一個(gè)圖片畫(huà)廊，隨意地?cái)[放，還原一種真實(shí)的感覺(jué)。

1 功能描述

該圖片畫(huà)廊在一個(gè)限定的區(qū)域范圍內(nèi)，擺放若干張圖片，每張圖片都有不同程度的旋轉(zhuǎn)，并指定旋轉(zhuǎn)的原點(diǎn)。鼠標(biāo)經(jīng)過(guò)圖片時(shí)，圖片會(huì)調(diào)整至正常的角度并放大顯示；鼠標(biāo)離開(kāi)后，又會(huì)還原為原來(lái)的狀態(tài)。在Firefox瀏覽器下預(yù)覽的界面效果，如下圖所示。

圖1 圖片畫(huà)廊 圖2 鼠標(biāo)經(jīng)過(guò)效果

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

2.1 設(shè)計(jì)網(wǎng)頁(yè)元素

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

2.2 設(shè)計(jì)基本的樣式表

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

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

padding： 0；

margin： 0；

} /* 將各元素的外邊距和內(nèi)邊距都設(shè)置為0 */

html， body， ul.thumb {

width： 100%；

height： 100%；

overflow： hidden；

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

ul.thumb {

position： relative；

list-style： none；

background： -webkit-gradient（radial， 45 45， 50， 50 10， 640， from（#444）， to（#333）） ！important；

background： url（../images/bark.jpg） repeat； /* 設(shè)置背景墻的樣式，在webkit核心瀏覽器下使用漸變效果，其它瀏覽器顯示背景圖片 */

}

ul.thumb li {

position： absolute；

top： 50%；

left： 50%； /* 設(shè)置子元素li相對(duì)于父元素ul絕對(duì)定位 */

padding： 6px 6px 24px 6px；

background： #FFF；

width： 150px；

height： 130px； /* 設(shè)置原始圖片大小 */

-moz-box-shadow：1px 1px 6px #222；

-webkit-box-shadow：1px 1px 6px #222；

box-shadow：1px 1px 6px #222； /* 設(shè)置盒子陰影，使其產(chǎn)生立體效果 */

-webkit-transition： all 3s ease-in-out； /* 實(shí)現(xiàn)3S的平滑過(guò)渡*/

z-index： 0； /* 圖片在Z軸上的起始位置 */

}

2.3 變形樣式表的設(shè)計(jì)

設(shè)計(jì)出隨意擺放的圖片效果。首先設(shè)置所有的鏈接默認(rèn)的傾斜，并自定義變形原點(diǎn)，同時(shí)加入動(dòng)畫(huà)過(guò)渡效果。使用CSS選擇器設(shè)置不一樣的旋轉(zhuǎn)角度。

ul.thumb li img {

width： 100%；

height： 100%；

}/* 設(shè)置各圖片的起始位置和變形原點(diǎn)，并加入動(dòng)畫(huà)過(guò)渡效果 */

ul.thumb li：nth-child（1） {

margin-top： -130px；

margin-left： -130px；

-moz-transform： rotate（30deg）；

-webkit-transform： rotate（30deg）；

transform： rotate（30deg）；

-webkit-filter： blur（5px）；

}ul.thumb li：nth-child（2） {

margin-top： -150px；

margin-left：60px；

-moz-transform： rotate（19deg）；

-webkit-transform： rotate（19deg）；

transform： rotate（19deg）；

-webkit-filter： blur（4px）；

}ul.thumb li：nth-child（3） {

margin-top： -10px；

margin-left： -180px；

-moz-transform： rotate（-10deg）；

-webkit-transform： rotate（-10deg）；

transform： rotate（-10deg）；

-webkit-filter： blur（3px）；

}ul.thumb li：nth-child（4） {

margin-top： -100px；

margin-left： -40px；

-moz-transform： rotate（12deg）；

-webkit-transform： rotate（12deg）；

transform： rotate（12deg）；

-webkit-filter： blur（2px）；

}ul.thumb li：nth-child（5） {

margin-top： 20px；

margin-left： 30px；

-moz-transform： rotate（-20deg）；

-webkit-transform： rotate（-20deg）；

transform： rotate（-20deg）；

-webkit-filter： blur（1px）；

}

2.4 鼠標(biāo)滑過(guò)時(shí)的效果實(shí)現(xiàn)

當(dāng)鼠標(biāo)滑過(guò)圖片時(shí)，圖片調(diào)整為正常角度并放大顯示。

ul.thumb li：hover{

z-index： 10； /* 鼠標(biāo)滑過(guò)圖片時(shí)，將其頂層顯示 */

width： 380px；

height： 222px； /* 放大圖像尺寸 */

margin-top： -120px；

margin-left： -160px； /* 定位圖片顯示位置 */

-moz-box-shadow：8px 8px 24px #111；

-webkit-box-shadow：8px 8px 24px #111；

box-shadow：8px 8px 24px #111； /* 放大盒子陰影效果 */

-moz-transform： rotate（0deg）；

-webkit-transform： rotate（0deg）；

-webkit-filter： blur（0px）；

transform： rotate（0deg）； /* 設(shè)置旋轉(zhuǎn)角度為零，使其正常角度顯示 */

}

3 結(jié)束語(yǔ)

本文所設(shè)計(jì)的圖片畫(huà)廊、代碼簡(jiǎn)單，具有良好的擴(kuò)展性，用戶可以根據(jù)自己的實(shí)際需要添加相關(guān)的Javascript語(yǔ)句，便能實(shí)現(xiàn)一款功能上為自己量身定做的圖片畫(huà)廊。

參考文獻(xiàn)：

[1] 張曉景.DIV+CSS3.0網(wǎng)頁(yè)樣式與布局經(jīng)典范例[M].北京：電子工業(yè)出版社，2012.

[2] 曾順.精通CSS+DIV網(wǎng)頁(yè)樣式與布局[M].北京：人民郵電出版社，2010.

[3] 張俊蘭，劉翼，鐵宏軍.基于CSS技術(shù)的網(wǎng)頁(yè)設(shè)計(jì)應(yīng)用研究[J].延安大學(xué)學(xué)報(bào)，2010，3（29）.

[4] 胡江匯，宋興.下一代Web標(biāo)準(zhǔn)之CSS3核心技術(shù)研究[J].黑龍江科技信息，2012（14）.

[5] 何麗.基于CSS3.0技術(shù)的網(wǎng)頁(yè)元素效果[J].軟件導(dǎo)刊，2011（8）.endprint

-moz-transform： rotate（30deg）；

-webkit-transform： rotate（30deg）；

transform： rotate（30deg）；

-webkit-filter： blur（5px）；

}ul.thumb li：nth-child（2） {

margin-top： -150px；

margin-left：60px；

-moz-transform： rotate（19deg）；

-webkit-transform： rotate（19deg）；

transform： rotate（19deg）；

-webkit-filter： blur（4px）；

}ul.thumb li：nth-child（3） {

margin-top： -10px；

margin-left： -180px；

-moz-transform： rotate（-10deg）；

-webkit-transform： rotate（-10deg）；

transform： rotate（-10deg）；

-webkit-filter： blur（3px）；

}ul.thumb li：nth-child（4） {

margin-top： -100px；

margin-left： -40px；

-moz-transform： rotate（12deg）；

-webkit-transform： rotate（12deg）；

transform： rotate（12deg）；

-webkit-filter： blur（2px）；

}ul.thumb li：nth-child（5） {

margin-top： 20px；

margin-left： 30px；

-moz-transform： rotate（-20deg）；

-webkit-transform： rotate（-20deg）；

transform： rotate（-20deg）；

-webkit-filter： blur（1px）；

}

2.4 鼠標(biāo)滑過(guò)時(shí)的效果實(shí)現(xiàn)

當(dāng)鼠標(biāo)滑過(guò)圖片時(shí)，圖片調(diào)整為正常角度并放大顯示。

ul.thumb li：hover{

z-index： 10； /* 鼠標(biāo)滑過(guò)圖片時(shí)，將其頂層顯示 */

width： 380px；

height： 222px； /* 放大圖像尺寸 */

margin-top： -120px；

margin-left： -160px； /* 定位圖片顯示位置 */

-moz-box-shadow：8px 8px 24px #111；

-webkit-box-shadow：8px 8px 24px #111；

box-shadow：8px 8px 24px #111； /* 放大盒子陰影效果 */

-moz-transform： rotate（0deg）；

-webkit-transform： rotate（0deg）；

-webkit-filter： blur（0px）；

transform： rotate（0deg）； /* 設(shè)置旋轉(zhuǎn)角度為零，使其正常角度顯示 */

}

3 結(jié)束語(yǔ)

本文所設(shè)計(jì)的圖片畫(huà)廊、代碼簡(jiǎn)單，具有良好的擴(kuò)展性，用戶可以根據(jù)自己的實(shí)際需要添加相關(guān)的Javascript語(yǔ)句，便能實(shí)現(xiàn)一款功能上為自己量身定做的圖片畫(huà)廊。

參考文獻(xiàn)：

[1] 張曉景.DIV+CSS3.0網(wǎng)頁(yè)樣式與布局經(jīng)典范例[M].北京：電子工業(yè)出版社，2012.

[2] 曾順.精通CSS+DIV網(wǎng)頁(yè)樣式與布局[M].北京：人民郵電出版社，2010.

[3] 張俊蘭，劉翼，鐵宏軍.基于CSS技術(shù)的網(wǎng)頁(yè)設(shè)計(jì)應(yīng)用研究[J].延安大學(xué)學(xué)報(bào)，2010，3（29）.

[4] 胡江匯，宋興.下一代Web標(biāo)準(zhǔn)之CSS3核心技術(shù)研究[J].黑龍江科技信息，2012（14）.

[5] 何麗.基于CSS3.0技術(shù)的網(wǎng)頁(yè)元素效果[J].軟件導(dǎo)刊，2011（8）.endprint

-moz-transform： rotate（30deg）；

-webkit-transform： rotate（30deg）；

transform： rotate（30deg）；

-webkit-filter： blur（5px）；

}ul.thumb li：nth-child（2） {

margin-top： -150px；

margin-left：60px；

-moz-transform： rotate（19deg）；

-webkit-transform： rotate（19deg）；

transform： rotate（19deg）；

-webkit-filter： blur（4px）；

}ul.thumb li：nth-child（3） {

margin-top： -10px；

margin-left： -180px；

-moz-transform： rotate（-10deg）；

-webkit-transform： rotate（-10deg）；

transform： rotate（-10deg）；

-webkit-filter： blur（3px）；

}ul.thumb li：nth-child（4） {

margin-top： -100px；

margin-left： -40px；

-moz-transform： rotate（12deg）；

-webkit-transform： rotate（12deg）；

transform： rotate（12deg）；

-webkit-filter： blur（2px）；

}ul.thumb li：nth-child（5） {

margin-top： 20px；

margin-left： 30px；

-moz-transform： rotate（-20deg）；

-webkit-transform： rotate（-20deg）；

transform： rotate（-20deg）；

-webkit-filter： blur（1px）；

}

2.4 鼠標(biāo)滑過(guò)時(shí)的效果實(shí)現(xiàn)

當(dāng)鼠標(biāo)滑過(guò)圖片時(shí)，圖片調(diào)整為正常角度并放大顯示。

ul.thumb li：hover{

z-index： 10； /* 鼠標(biāo)滑過(guò)圖片時(shí)，將其頂層顯示 */

width： 380px；

height： 222px； /* 放大圖像尺寸 */

margin-top： -120px；

margin-left： -160px； /* 定位圖片顯示位置 */

-moz-box-shadow：8px 8px 24px #111；

-webkit-box-shadow：8px 8px 24px #111；

box-shadow：8px 8px 24px #111； /* 放大盒子陰影效果 */

-moz-transform： rotate（0deg）；

-webkit-transform： rotate（0deg）；

-webkit-filter： blur（0px）；

transform： rotate（0deg）； /* 設(shè)置旋轉(zhuǎn)角度為零，使其正常角度顯示 */

}

3 結(jié)束語(yǔ)

本文所設(shè)計(jì)的圖片畫(huà)廊、代碼簡(jiǎn)單，具有良好的擴(kuò)展性，用戶可以根據(jù)自己的實(shí)際需要添加相關(guān)的Javascript語(yǔ)句，便能實(shí)現(xiàn)一款功能上為自己量身定做的圖片畫(huà)廊。

參考文獻(xiàn)：

[1] 張曉景.DIV+CSS3.0網(wǎng)頁(yè)樣式與布局經(jīng)典范例[M].北京：電子工業(yè)出版社，2012.

[2] 曾順.精通CSS+DIV網(wǎng)頁(yè)樣式與布局[M].北京：人民郵電出版社，2010.

[3] 張俊蘭，劉翼，鐵宏軍.基于CSS技術(shù)的網(wǎng)頁(yè)設(shè)計(jì)應(yīng)用研究[J].延安大學(xué)學(xué)報(bào)，2010，3（29）.

[4] 胡江匯，宋興.下一代Web標(biāo)準(zhǔn)之CSS3核心技術(shù)研究[J].黑龍江科技信息，2012（14）.

[5] 何麗.基于CSS3.0技術(shù)的網(wǎng)頁(yè)元素效果[J].軟件導(dǎo)刊，2011（8）.endprint