效果图
代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>景区美景</title>
<style type="text/css">
.containter{
margin: auto;
width: 1080px;
height: 1920px;
padding-left:50px;
background: url(image/背景.jpg) no-repeat;
position: relative;
padding-top: 40px;
}
.c1{
width: 500px;
height: 500px;
float: left;
margin: 8px;
}
.i1{
width: 450px;
height: 450px;
position: relative;
top: 0;
left:0;
z-index: 199;
}
.i2{
width: 450px;
height: 450px;
position: relative;
top: -464px;
left:0;
z-index: 99;
-moz-transform:rotate(4deg);
-webkit-transform:rotate(4deg);
}
.return{
z-index: 999;
}
.return {
position: absolute;
bottom: 10px;
left: 50%;
right: 50%;
height: 50px;
line-height: 50px;
text-align: center;
color: #5AAFFF;
font-size: 32px;
letter-spacing: 15px;
font-family: 微软雅黑;
font-weight: bold;
}
.return b {
position: absolute;
bottom: 0;
top: 0;
left: -200px;
right: -200px;
background: #E5F1FD;
border-radius: 50px;
}
</style>
</head>
<body>
<div class="containter">
<div class="cc clearfix">
<div class="c1">
<img src="./image/caoxi/1.jpg" class="i1">
<img src="./image/caoxi/1.jpg" class="i2">
</div>
<div class="c1">
<img src="./image/caoxi/2.jpg" class="i1">
<img src="./image/caoxi/2.jpg" class="i2">
</div>
<div class="c1">
<img src="./image/caoxi/3.jpg" class="i1">
<img src="./image/caoxi/3.jpg" class="i2">
</div>
<div class="c1">
<img src="./image/caoxi/4.jpg" class="i1">
<img src="./image/caoxi/4.jpg" class="i2">
</div>
<div class="c1">
<img src="./image/caoxi/5.jpg" class="i1">
<img src="./image/caoxi/5.jpg" class="i2">
</div>
<div class="c1">
<img src="./image/caoxi/6.jpg" class="i1">
<img src="./image/caoxi/6.jpg" class="i2">
</div>
<div class="c1">
<img src="./image/caoxi/7.jpg" class="i1">
<img src="./image/caoxi/7.jpg" class="i2">
</div>
<div class="c1">
<img src="./image/caoxi/8.jpg" class="i1">
<img src="./image/caoxi/8.jpg" class="i2">
</div>
</div>
<a class="return" href="windex.html" title="返回主页">
<b>返回主页</b>
</a>
</div>
</body>
</html>
