html+css照片墙
html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cssz照片墙</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<h1>照片墙</h1>
<div class ="container">
<img class = "pic1 pic" src="img/1.jpg" alt=""/>
<img class = "pic2 pic" src="img/2.jpg" alt=""/>
<img class = "pic3 pic" src="img/3.jpg" alt=""/>
<img class = "pic4 pic" src="img/4.jpg" alt=""/>
<img class = "pic5 pic" src="img/5.jpg" alt=""/>
<img class = "pic6 pic" src="img/6.jpg" alt=""/>
<img class = "pic7 pic" src="img/7.jpg" alt=""/>
<img class = "pic8 pic" src="img/8.jpg" alt=""/>
<img class = "pic9 pic" src="img/9.jpg" alt=""/>
</div>
</body>
</html>
css文件：
h1{text-align:center;}
body{background: #eee;}
.container{
width:960px;
height: 450px;
margin:60px auto;
position: relative;
}
img{
padding:10px 10px 15px 10px;
border: 1px solid #ccc;
background: #fff;
position: absolute;
width:150px;
-webkit-transition:1s;
-moz-transition:1s;
transition: 1s;
}
img:hover{
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
transform: rotate(0deg);
-webkit-transform:scale(1.2);
-moz-transform:(1.2);
transform:scale(1.2);
z-index:2;
box-shadow: 10px 10px 15px #ccc;
}
.pic1{
top:2px;
left:10px;
z-index:1;
-webkit-transform:rotate(-10deg);
-moz-transform:rotate(-10deg);
transform: rotate(-10deg);
}
.pic2{
top:25px;
left:170px;
z-index:1;
-webkit-transform:rotate(20deg);
-moz-transform:rotate(20deg);
transform: rotate(20deg);
}
.pic3{
top:30px;
left:300px;
z-index:1;
-webkit-transform:rotate(-15deg);
-moz-transform:rotate(-15deg);
transform: rotate(-15deg);
}
.pic4{
top:17px;
left:450px;
z-index:1;
-webkit-transform:rotate(8deg);
-moz-transform:rotate(8deg);
transform: rotate(8deg);
}
.pic5{
top:30px;
left:600px;
z-index:1;
-webkit-transform:rotate(2deg);
-moz-transform:rotate(2deg);
transform: rotate(2deg);
}
.pic6{
bottom:40px;
left:50px;
z-index:1;
-webkit-transform:rotate(-7deg);
-moz-transform:rotate(-7deg);
transform: rotate(-7deg);
}
.pic7{
bottom:10px;
left:200px;
z-index:1;
-webkit-transform:rotate(10deg);
-moz-transform:rotate(10deg);
transform: rotate(10deg);
}
.pic8{
bottom:10px;
left:350px;
z-index:1;
-webkit-transform:rotate(20deg);
-moz-transform:rotate(20deg);
transform: rotate(20deg);
}
.pic9{
bottom:10px;
left:600px;
z-index:1;
-webkit-transform:rotate(-5deg);
-moz-transform:rotate(-5deg);
transform: rotate(-5deg);
}
