您的位置：首页 > Web前端 > HTML5

HTML5 之图片墙

2016-04-17 23:29 543 查看

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);
}

效果图

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

HTML5 之 图片墙

HTML5 之图片墙