人生就是搞事

每天睡觉的时候问自己：今天一天过得不错吧？梦想是不是更远了？

接下来就是CSS部分的代码

h1{color:#CFB53B;font-family:方正清刻本悦宋;text-align:center;}

body{background:url(bg.jpg)top center no-repeat;background-size:cover;}

#ji{font-family:"Courier New", Courier, monospace;

font-size:24px;text-align:center;color:#6B4226;}

.con{

width: 960px;

height: 500px;

margin:100px auto;

position: relative;}

img{

position:absolute;

padding: 10px 10px 15px;

background:#fff;

border:1px solid #ddd;

cursor:pointer;

}

img:nth-of-type(1){transform:rotate(20deg);z-index:2;

left:10%;

top:180px;}

img:nth-of-type(2){transform:rotate(10deg);z-index:4;

left:25%;

top:180px;}

img:nth-of-type(3){transform:rotate(-10deg);z-index:1;

left:40%;

top:180px;}

img:nth-of-type(4){transform:rotate(5deg);z-index:2;

left:55%;

top:180px;}

img:nth-of-type(5){transform:rotate(10deg);z-index:3;

left:70%;

top:180px;}

img:nth-of-type(6){transform:rotate(-5deg);z-index:1;

left:10%;

top:500px;}

img:nth-of-type(7){transform:rotate(10deg);z-index:2;

left:25%;

top:500px;}

img:nth-of-type(8){transform:rotate(20deg);z-index:1;

left:40%;

top:500px;}

img:nth-of-type(9){transform:rotate(10deg);z-index:4;

left:55%;

top:500px;}

img:nth-of-type(10){transform:rotate(-10deg);z-index:1;

left:70%;

top:500px;}

img:hover{

transform:scale(2,2);

transition:all 3s;

box-shadow: 10px 10px 15px #034663;

z-index:20

}

首先，为了照片墙美观一些，我们在主体部分加入了一张背景图片，使得整个界面不单调。

然后为照片墙的名称加一些特殊字体和颜色，并使文本内容居中。

接下来就是照片的布局和旋转特效了，首先我们为每一个图片设置一个position:absolute绝对定位

因为我们待会儿需要用到z-index来为图片设置缩放和堆叠的效果，如果没有绝对定位的话所有的图片都会层叠在一起

为了没个图片设置padding: 10px 10px 15px;(上下左右四个内边距为10px)background设置白色，这样每个图片都

拥有了一个白色的边框，然后设置光标样式cursor，使cursor属性值为pointer，当鼠标放在图片上将显示手指样式。

然后使用nth-of-type(n)选择器来逐个选择图片，img:nth-of-type(1)代表选择第一个图片，以此类推，

使用transform:rotate()来为图片设置一个旋转角度，角度可以为负。

使用z-index:()来设置图片的堆叠属性，也就是z轴

使用left:();top:()来为图片设置摆放位置，从代码可以看出，我们为前面五张图片设置高度180px使其呈一列摆放

图片间隔15%规律摆放，第二排图片高度设置为500px，当然这里的值并不固定，为了美观或者个性也可以将图片随

意摆放于视窗某处。

接下来就是设置当鼠标放在图片上图片放大的特效了，使用img:hover设置当鼠标悬停图片时

transform:scale(x,y);图片进行缩放的比列x y可以不相等，我们这里设置了放大2倍

transition:all ns;来规定完成这个动作所需要的时间，这里我们设置时间为3s

box-shadow来为图片设置阴影效果，其中水平阴影以及垂直阴影设置为必须，这里我们设置水平与垂直为10px

模糊距离为15px，因为我们设置了hover,所在阴影效果只会在图片放大之后才有效果

接下来依然设置z-index:()，这里的值要大于前面每张图片的值，这样当图片放大之后才会现在在屏幕前方

这样呢我们一个简单的照片墙就以及完成了

效果展示