学生时期照片墙HTML,CSS3简单实现照片墙

HTML

复制代码代码如下:

照片墙制作

CSS(此处省略了浏览器私有属性前缀!)

复制代码代码如下:

* {margin:0; padding:0;}

body { background-color: #eee; padding-top: 50px;}

h2 { text-align: center;}

.container { position: relative; width:1000px; height:700px; margin:0px auto; }

img { position: absolute; top:50px; left:100px; cursor: pointer;

padding:10px 10px 25px; background-color: #fff; border:1px solid #ddd;

transition:0.5s; box-shadow: 3px 3px 3px #ccc;

}

.img1 { left:40px; top:20px; transform:rotate(30deg); z-index: 1;}

.img2 { left:156px; top:156px; transform:rotate(-30deg); z-index: 1;}

.img3 { left:381px; top:60px; transform:rotate(30deg); z-index: 1;}

.img4 { left:458px; top:256px; transform:rotate(30deg); z-index: 1;}

.img5 { left:684px; top:110px; transform:rotate(-40deg); z-index: 1;}

img:hover { transform:rotate(0deg); transform:scale(1.5); box-shadow: 6px 6px 6px #656565; z-index: 2;}

效果图：