<!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;
}
时间： 2024-10-11 23:10:25