使用html+css实现一个个人照片墙

今天我们来简单的实现一个个人照片墙

照片呈不规则的角度摆放，当鼠标放在照片上时，照片会放大；

鼠标离开照片时，照片回到原来的状态。

其实只要用CSS3的一些属性完全就可以实现这样的效果，无须一行js代码~~

代码分为两部分

HTML内容其实很简单，就是在一个div里面放上几个图片

<div>

    <h1>人生就是搞事

   

    </h1>

  <p id=ji>每天睡觉的时候问自己：今天一天过得不错吧？梦想是不是更远了？</p>

  </div>

 <div>

   <div class="mm" align=center>

           <img src=1.jpg / width=250px>

           <img src=2.jpg / width=270px>

           <img src=3.jpg / width=260px>

           <img src=4.jpg / width=290px>

           <img src=5.jpg / width=290px>

           <img src=6.jpg / width=250px>

           <img src=7.jpg / width=250px>

           <img src=8.jpg / width=290px>

           <img src=9.jpg / width=300px>

           <img src=10.jpg / width=300px>

 

   </div>

接下来就是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

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

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

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

效果展示