基于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；

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

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； /* 设置背景墙的样式，在webkit核心浏览器下使用渐变效果，其它浏览器显示背景图片 */

}

ul.thumb li {

position： absolute；

top： 50%；

left： 50%； /* 设置子元素li相对于父元素ul绝对定位 */

padding： 6px 6px 24px 6px；

background： #FFF；

width： 150px；

height： 130px； /* 设置原始图片大小 */

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

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

box-shadow：1px 1px 6px #222； /* 设置盒子阴影，使其产生立体效果 */

-webkit-transition： all 3s ease-in-out； /* 实现3S的平滑过渡*/

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

}

2.3 变形样式表的设计

设计出随意摆放的图片效果。首先设置所有的链接默认的倾斜，并自定义变形原点，同时加入动画过渡效果。使用CSS选择器设置不一样的旋转角度。

ul.thumb li img {

width： 100%；

height： 100%；

}/* 设置各图片的起始位置和变形原点，并加入动画过渡效果 */

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 鼠标滑过时的效果实现

当鼠标滑过图片时，图片调整为正常角度并放大显示。

ul.thumb li：hover{

z-index： 10； /* 鼠标滑过图片时，将其顶层显示 */

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）； /* 设置旋转角度为零，使其正常角度显示 */

}

3 结束语

本文所设计的图片画廊、代码简单，具有良好的扩展性，用户可以根据自己的实际需要添加相关的Javascript语句，便能实现一款功能上为自己量身定做的图片画廊。

参考文献：

[1] 张晓景.DIV+CSS3.0网页样式与布局经典范例[M].北京：电子工业出版社，2012.

[2] 曾顺.精通CSS+DIV网页样式与布局[M].北京：人民邮电出版社，2010.

[3] 张俊兰，刘翼，铁宏军.基于CSS技术的网页设计应用研究[J].延安大学学报，2010，3（29）.

[4] 胡江汇，宋兴.下一代Web标准之CSS3核心技术研究[J].黑龙江科技信息，2012（14）.

[5] 何丽.基于CSS3.0技术的网页元素效果[J].软件导刊，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 鼠标滑过时的效果实现

当鼠标滑过图片时，图片调整为正常角度并放大显示。

ul.thumb li：hover{

z-index： 10； /* 鼠标滑过图片时，将其顶层显示 */

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）； /* 设置旋转角度为零，使其正常角度显示 */

}

3 结束语

本文所设计的图片画廊、代码简单，具有良好的扩展性，用户可以根据自己的实际需要添加相关的Javascript语句，便能实现一款功能上为自己量身定做的图片画廊。

参考文献：

[1] 张晓景.DIV+CSS3.0网页样式与布局经典范例[M].北京：电子工业出版社，2012.

[2] 曾顺.精通CSS+DIV网页样式与布局[M].北京：人民邮电出版社，2010.

[3] 张俊兰，刘翼，铁宏军.基于CSS技术的网页设计应用研究[J].延安大学学报，2010，3（29）.

[4] 胡江汇，宋兴.下一代Web标准之CSS3核心技术研究[J].黑龙江科技信息，2012（14）.

[5] 何丽.基于CSS3.0技术的网页元素效果[J].软件导刊，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 鼠标滑过时的效果实现

当鼠标滑过图片时，图片调整为正常角度并放大显示。

ul.thumb li：hover{

z-index： 10； /* 鼠标滑过图片时，将其顶层显示 */

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）； /* 设置旋转角度为零，使其正常角度显示 */

}

3 结束语

本文所设计的图片画廊、代码简单，具有良好的扩展性，用户可以根据自己的实际需要添加相关的Javascript语句，便能实现一款功能上为自己量身定做的图片画廊。

参考文献：

[1] 张晓景.DIV+CSS3.0网页样式与布局经典范例[M].北京：电子工业出版社，2012.

[2] 曾顺.精通CSS+DIV网页样式与布局[M].北京：人民邮电出版社，2010.

[3] 张俊兰，刘翼，铁宏军.基于CSS技术的网页设计应用研究[J].延安大学学报，2010，3（29）.

[4] 胡江汇，宋兴.下一代Web标准之CSS3核心技术研究[J].黑龙江科技信息，2012（14）.

[5] 何丽.基于CSS3.0技术的网页元素效果[J].软件导刊，2011（8）.endprint