大清早来一发——CSS3实现照片墙效果 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS3照片墙</title>
	<link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body>
	<h1>照片墙制作</h1>
	<div class="container">
		<img src="./img/1.jpg" class="img_1">
		<img src="./img/2.jpg" class="img_2">
		<img src="./img/3.jpg" class="img_3">
		<img src="./img/4.jpg" class="img_4">
		<img src="./img/5.jpg" class="img_5">
		<img src="./img/6.jpg" class="img_6">
		<img src="./img/7.jpg" class="img_7">
	</div>
</body>
</html>

　　

body{
    padding: 0;
    margin: 0;
    background: #CEEEFD;
}
h1{
    text-align: center;
}
.container{
    width: 960px;
    height: 500px;
    margin: 20px auto;
    position: relative;
    background: #D7D9F4;
    overflow: hidden;
}
img{
    width: 350px;
    height: 250px;
    padding: 5px 5px 10px 5px;
    background: white;
    position: absolute;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    transition: 0.5s;
    z-index: 1;
}
.img_1{
     top:0px;
     left: 220px;
     -webkit-transform: rotate(20deg);
     -moz-transform: rotate(20deg);
     transform: rotate(20deg);
}
.img_2{
     top:0px;
     left: 20px;
     -webkit-transform: rotate(-10deg);
     -moz-transform: rotate(-10deg);
     transform: rotate(-10deg);
}
.img_3{
     top:50px;
     right: 40px;
     -webkit-transform: rotate(-5deg);
     -moz-transform: rotate(-5deg);
     transform: rotate(-5deg);
}
.img_4{
     top:50px;
     right: 100px;
     -webkit-transform: rotate(30deg);
     -moz-transform: rotate(30deg);
     transform: rotate(30deg);
}
.img_5{
     top:200px;
     left: 300px;
     -webkit-transform: rotate(-15deg);
     -moz-transform: rotate(-15deg);
     transform: rotate(-15deg);
}
.img_6{
     top:200px;
     left: 50px;
     -webkit-transform: rotate(-20deg);
     -moz-transform: rotate(-20deg);
     transform: rotate(-20deg);
}
.img_7{
     bottom:50px;
     right: 30px;
     -webkit-transform: rotate(30deg);
     -moz-transform: rotate(30deg);
     transform: rotate(30deg);
}
img:hover{
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
    box-shadow: 10px 10px 15px gray;
    z-index: 2;
}

 

posted @ 2015-11-27 09:57  Front-End/Arron  阅读(1785)  评论(0)    收藏  举报