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

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

照片呈不规则的角度摆放，当鼠标放在照片上时，照片会放大；
鼠标离开照片时，照片回到原来的状态。
其实只要用CSS3的一些属性完全就可以实现这样的效果，无须一行js代码~~

代码分为两部分

HTML内容其实很简单，就是在一个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

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

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

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

效果展示