基于CSS3的图片画廊的设计与实现
2014-07-28陈纪霞
陈纪霞
摘要：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
