用html做照片墙的教程,HTML5开发项目实战:照片墙(示例代码)

html

图片墙

css3

* {

margin: 0;

padding: 0;

}

body {

background-color: #eeeeee;

}

.container {

width: 960px;

height: 450px;

margin: 60px auto;

position: relative;

}

.pic {

width: 160px;

}

.container img:hover {

box-shadow: 15px 15px 20px rgba(50, 50, 50, 0.4);

transform: rotate(0deg) scale(1.20);

-webkit-transform: rotate(0deg) scale(1.20);

z-index: 2;

}

.container img {

padding: 10px 10px 15px;

background: white;

border: 1px solid #ddd;

box-shadow: 2px 2px 3px rgba(50, 50, 50, 0.4);

-webkit-transition: all 0.5s ease-in;

-moz-transition: all 0.5s ease-in;

-ms-transition: all 0.5s ease-in;

-o-transition: all 0.5s ease-in;

transition: all 0.5s ease-in;

position: absolute;

z-index: 1;

}

.pic1 {

left: 400px;

top: 0;

transform: rotate(-5deg);

-webkit-transform: rotate(-5deg);

}

.pic2 {

left: 200px;

top: 0;

transform: rotate(-20deg);

-webkit-transform: rotate(-20deg);

}

.pic3 {

bottom: 200px;

right: 100px;

transform: rotate(5deg);

-webkit-transform: rotate(5deg);

}

.pic4 {

bottom: 200px;

left: 300;

transform: rotate(-10deg);

-webkit-transform: rotate(-10deg);

}

.pic5 {

bottom: 0px;

top: 0;

transform: rotate(-10deg);

-webkit-transform: rotate(-10deg);

}

.pic6 {

left: 0px;

top: 0;

transform: rotate(10deg);

-webkit-transform: rotate(10deg);

}

.pic7 {

left: 850px;

top: 0;

transform: rotate(20deg);

-webkit-transform: rotate(20deg);

}

.pic8 {

left: 0px;

top: 200px;

transform: rotate(20deg);

-webkit-transform: rotate(20deg);

}

.pic9 {

left: 550px;

top: 90;

transform: rotate(15deg);

-webkit-transform: rotate(15deg);

}

图片：

效果：

2017-09-15 18:33:34