基于CSS3图片画廊设计与实现.docVIP

基于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： blu