写css动画
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="images/12.jpeg">
<title>照片墙</title>
<link rel="stylesheet" type="text/css" href="css/1.css">
</head>
<body>
<div id="a">
<div id="b"> </div>
<img src="images/11.jpg" alt="123" title="范冰冰" class="z1">
<img src="images/1.jpg" alt="123" title="范冰冰" class="z2">
<img src="images/3.jpg" alt="123" title="李冰冰" class="z3">
<img src="images/4.jpg" alt="123" title="范冰冰" class="z4">
<div id="s"> </div>
<img src="images/5.jpg" alt="123" title="范冰冰" class="z5">
<img src="images/2.jpg" alt="123" title="范冰冰" class="z6">
<img src="images/8.jpg" alt="123" title="范冰冰" class="z7">
<img src="images/9.jpg" alt="123" title="赵丽雅" class="z8">
<div id="v"> </div>
<img src="images/10.jpg" alt="123" title="范冰冰" class="z9">
<img src="images/6.jpg" alt="123" title="范冰冰" class="z10">
<img src="images/7.jpg" alt="123" title="范冰冰" class="z11">
<img src="images/12.jpg" alt="123" title="范冰冰" class="z12">
</div>
</body>
</html>
body{
background-color:#F6DB6B;
}
#a{
line-height:100px;
margin:100px auto;
padding-top:80px;
border:3px solid #FFFCCC;
width:1300px;
height:2000px;
position:relative;
}
#a img{
background-color:white;
width:150px;
height:auto;
border:2px solid #ccc;
padding:20px;
box-shadow:2px 2px 2px rgba(5,5,5,0.7);
transition:all 0.4s ease-in;
position:absolute;
}
#a img:hover{
box-shadow:20px 20px 20px rgba(5,5,5,0.7);
transform:rotate(30deg) scale(1.2);
z-index:88;
}
#b{
background-color:white;
width:500px;
height:auto;
}
#c{
background-color:white;
width:500px;
height:auto;
}
#v{
background-color:white;
width:500px;
height:auto;
}
.z1{
transform:rotate(0deg);
left:100px;
}
.z2{
transform:rotate(10deg);
left:100px;
}
.z3{
transform:rotate(20deg);
left:100px;
}
.z4{
transform:rotate(30deg);
left:100px;
}
.z5{
transform:rotate(10deg);
left:400px;
}
.z6{
transform:rotate(20deg);
left:400px;
}
.z7{
transform:rotate(30deg);
left:400px;
}
.z8{
transform:rotate(40deg);
left:400px;
}
.z9{
transform:rotate(-20deg);
left:900px;
}
.z10{
transform:rotate(-10deg);
left:900px;
}
.z11{
transform:rotate(0deg);
left:900px;
}
.z12{
transform:rotate(10deg);
left:900px;
}
