<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>純CSS實現照片牆</title>
<style>
/* RESET */
*{
margin: 0;
padding: 0;
}
body {
font-family: Tahoma, Helvetica, "\5b8b\4f53", "Arial", sans-serif;
font-size: 12px;
color: #eeeeee;
}
.container{
width: 90%;
height: auto;
margin: auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.container .img-wrap {
padding: 10px;
margin: 10px;
background: white;
border: 1px solid #ddd;
width: 160px;
height: fit-content;
box-shadow: 2px 2px 3px rgba(50,50,50,0.4);
-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;
z-index: 1;
}
.container .img-wrap img {
width: 100%;
height: auto;
}
.container .img-wrap:after {
content: attr(data-title);
display: block;
text-align: center;
font-size: 15px;
color: #FCC688;
}
.container .img-wrap:nth-child(1n){
transform:rotate(-5deg);
-webkit-transform:rotate(-5deg);
}
.container .img-wrap:nth-child(2n){
transform:rotate(-20deg);
-webkit-transform:rotate(-20deg);
}
.container .img-wrap:nth-child(3n){
transform:rotate(5deg);
-webkit-transform:rotate(5deg);
}
.container .img-wrap:nth-child(4n){
transform:rotate(-10deg);
-webkit-transform:rotate(-10deg);
}
.container .img-wrap:nth-child(5n){
transform:rotate(-30deg);
-webkit-transform:rotate(-30deg);
}
.container .img-wrap:nth-child(6n){
transform:rotate(20deg);
-webkit-transform:rotate(20deg);
}
.container .img-wrap:nth-child(7n){
transform:rotate(50deg);
-webkit-transform:rotate(50deg);
}
.container .img-wrap:nth-child(8n){
transform:rotate(5deg);
-webkit-transform:rotate(5deg);
}
.container .img-wrap:nth-child(9n){
transform:rotate(15deg);
-webkit-transform:rotate(15deg);
}
.container .img-wrap:nth-child(10n){
transform:rotate(-15deg);
-webkit-transform:rotate(-15deg);
}
.container .img-wrap:nth-child(11n){
transform:rotate(-25deg);
-webkit-transform:rotate(-25deg);
}
.container .img-wrap:hover {
box-shadow: 15px 15px 20px rgba(50,50,50,0.4);
transform:rotate(0deg) scale(1.20);
-webkit-transform:rotate(0deg) scale(1.20);
z-index: 2;
position: relative;
}
</style>
</head>
<body>
<div class="container">
<div class="img-wrap" data-title="照片1"><img src="http://dingyue.nosdn.127.net/3dI3RPSOI2eBbguqAvd3Tt8qeDZqVfBAIn2RRFktrpNe91512439810577.jpg"></div>
<div class="img-wrap" data-title="照片2"><img src="http://01.minipic.eastday.com/20170207/20170207145729_d643e7de3fcaf066fe54e19b3293e074_4.jpeg"></div>
<div class="img-wrap" data-title="照片3"><img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=335766965,268232045&fm=26&gp=0.jpg"></div>
<div class="img-wrap" data-title="照片4"><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1119298312,2521482562&fm=26&gp=0.jpg"></div>
<div class="img-wrap" data-title="照片5"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592929071799&di=41e3159489c46603fbcc0525675ad915&imgtype=0&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D3956123290%2C3155232422%26fm%3D214%26gp%3D0.jpg"></div>
<div class="img-wrap" data-title="照片6"><img src="http://dingyue.nosdn.127.net/3dI3RPSOI2eBbguqAvd3Tt8qeDZqVfBAIn2RRFktrpNe91512439810577.jpg"></div>
<div class="img-wrap" data-title="照片7"><img src="http://01.minipic.eastday.com/20170207/20170207145729_d643e7de3fcaf066fe54e19b3293e074_4.jpeg"></div>
<div class="img-wrap" data-title="照片8"><img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=335766965,268232045&fm=26&gp=0.jpg"></div>
<div class="img-wrap" data-title="照片9"><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1119298312,2521482562&fm=26&gp=0.jpg"></div>
<div class="img-wrap" data-title="照片10"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592929071799&di=41e3159489c46603fbcc0525675ad915&imgtype=0&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D3956123290%2C3155232422%26fm%3D214%26gp%3D0.jpg"></div>
<div class="img-wrap" data-title="照片1"><img src="http://dingyue.nosdn.127.net/3dI3RPSOI2eBbguqAvd3Tt8qeDZqVfBAIn2RRFktrpNe91512439810577.jpg"></div>
<div class="img-wrap" data-title="照片2"><img src="http://01.minipic.eastday.com/20170207/20170207145729_d643e7de3fcaf066fe54e19b3293e074_4.jpeg"></div>
<div class="img-wrap" data-title="照片3"><img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=335766965,268232045&fm=26&gp=0.jpg"></div>
<div class="img-wrap" data-title="照片4"><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1119298312,2521482562&fm=26&gp=0.jpg"></div>
<div class="img-wrap" data-title="照片5"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592929071799&di=41e3159489c46603fbcc0525675ad915&imgtype=0&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D3956123290%2C3155232422%26fm%3D214%26gp%3D0.jpg"></div>
<div class="img-wrap" data-title="照片6"><img src="http://dingyue.nosdn.127.net/3dI3RPSOI2eBbguqAvd3Tt8qeDZqVfBAIn2RRFktrpNe91512439810577.jpg"></div>
<div class="img-wrap" data-title="照片7"><img src="http://01.minipic.eastday.com/20170207/20170207145729_d643e7de3fcaf066fe54e19b3293e074_4.jpeg"></div>
<div class="img-wrap" data-title="照片8"><img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=335766965,268232045&fm=26&gp=0.jpg"></div>
<div class="img-wrap" data-title="照片9"><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1119298312,2521482562&fm=26&gp=0.jpg"></div>
<div class="img-wrap" data-title="照片10"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592929071799&di=41e3159489c46603fbcc0525675ad915&imgtype=0&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D3956123290%2C3155232422%26fm%3D214%26gp%3D0.jpg"></div>
</div>
</body>
</html>
