基于CSS3的照片墙的设计与实现

高娟 张卫清 崔艳萍

CSS3作为层叠样式表的最新版本，新增了诸多特性，运用CSS3新特性，我们可以不用专门的图片处理软件、JavaScript代码以及Flash动画就可以实现阴影、渐变、圆角、颜色透明度、变形、动画等精美的网页显示效果。

本文利用CSS3新增的transform属性和transition属性，实现照片的旋转、缩放等变形效果和动画快慢等动画过渡效果，模拟一个照片墙，随意摆放，还原一种真实感受。

1 照片墙功能描述

默认状态下，照片随意的摆放在页面的不同位置，并且都有不同角度的倾斜和相互遮挡，当鼠标移动到某一张照片上时，此照片缓慢的由倾斜状态转变为端正状态，并且放大一定比例显示在最上面，鼠标移走后，又恢复为原状态。

2 实现方法

2.1 静态照片墙的制作

首先，在网页中添加一个div容器，在容器中添加image标签放入照片，html代码如下：

……

然后，设置照片以不同的位置和旋转角度随意摆放，这需要用到两个知识：使用绝对定位position:absolute将照片放在不同的位置，使用css3属性transform：rotate()，将各个照片旋转不同的角度。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;}/*设置照片的公共样式：内边距、背景、边框、阴影、定位*/

.pic1{left:400px;top:0;-webkit-transform:rotate(-5deg);-moz-transform:rotate(-5deg);transform:rotate(-5deg);}/*设置每张图片特有的样式：位置、初始旋转角度*/

.pic2{top:0;left:600px;-webkittransform:rotate(-20deg);-moz-transform:rotate(-20deg);transform:rotate(-20deg);}/*后面的照片参照照片1改变参数即可*/

2.2 鼠标经过照片的动画制作

鼠标移到照片上，照片缓慢旋转、放大并显示在最上层，其原理如下：

①使用css3属性transform：rotate(0deg)，可以将倾斜的照片角度旋转为0，即把照片旋转端正。

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

③使用css3属性transition，将以上的变化设置为在一定时间内完成，从而达到缓慢变化的效果。

④设置了绝对定位的元素可以通过z-index属性控制其显示的层次关系。将要显示在最上层的照片的z-index值设置得比其他照片大即可。

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 结束语

本文所设计的照片墙效果主要使用CSS3的transition、transform、rotate、scale等属性实现。在不使用任何JavaScript的前提下，用纯CSS极方便的实现了甚至JavaScript都无法实现的复杂的照片墙特效，包括图片的缓慢旋转、放大等，这就是CSS3的魅力所在。相信大家在使用CSS3的过程中不断探索，一定可以制作出更加丰富绚丽的Web应用。

[1]陈纪霞.电脑知识与技术[J].基于CSS3的图片画廊的设计与实现，2014年第6期