html代碼 通過以下代碼就能實現一個HTML5製作的圖片牆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>picture wall</title>
<link type="text/css" href="style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<img src="img/1.jpg" class="pic pic1">
<img src="img/2.jpg" class="pic pic2">
<img src="img/3.jpg" class="pic pic3">
<img src="img/4.jpg" class="pic pic4">
<img src="img/5.jpg" class="pic pic5">
<img src="img/6.jpg" class="pic pic6">
<img src="img/7.jpg" class="pic pic7">
<img src="img/8.jpg" class="pic pic8">
<img src="img/9.jpg" class="pic pic9">
</div>
</body>
</html>CSS代碼
* {
margin: 0;
padding: 0;
}
body {
background-color: #eeeeee;
}
.container {
width: 960px;
height: 450px;
margin: 60px auto;
position: relative;
}
.container .pic {
width: 160px;
}
.container img:hover {
z-index: 2;
box-shadow: 15px 15px 20px rgba(50, 50, 50, 0.4);
transform: rotate(0deg) scale(1.20);
-webkit-transform: rotate(0deg) scale(1.2);
}
.container img {
padding: 10px 10px 15px;
background: white;
border: 1px solid #ddd;
box-shadow: 2px 2px 3px rgba(50, 50, 50, 0.4);
z-index: 1;
-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;
}
.pic1 {
left: 400px;
right: 0;
transform: rotate(-50deg);
-webkit-transform: rotate(-5deg);
}
.pic2 {
left: 200px;
right: 0;
transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
}
.pic3 {
bottom: 100px;
right: 100;
transform: rotate(5deg);
-webkit-transform: rotate(5deg);
}
.pic4 {
bottom: 0px;
right: 0;
transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
}
.pic5 {
bottom: 0px;
right: 0;
transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
}
.pic6 {
left: 0px;
right: 0;
transform: rotate(20deg);
-webkit-transform: rotate(20deg);
}
.pic7 {
left: 850px;
right: 0;
transform: rotate(-0deg);
-webkit-transform: rotate(10deg);
}
.pic8 {
bottom: -20px;
right: 650px;
transform: rotate(5deg);
-webkit-transform: rotate(5deg);
}
.pic9 {
left: 550px;
right: 90px;
transform: rotate(15deg);
-webkit-transform: rotate(15deg);
}效果圖
