演示地址：https://www.albertyy.com/2020/6/photo.html
原始效果：
鼠标经过效果：
鼠标点击效果：
代码：
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta charset="utf-8">
-
<title>纯CSS实现照片墙</title>
-
<style>
-
/*
-
*纯CSS实现照片墙：
-
*公众号:AlbertYang
-
*/
-
/* 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: 6.25rem 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;
-
-webkit-filter: blur(1px);
-
-moz-filter: blur(1px);
-
-ms-filter: blur(1px);
-
-o-filter: blur(1px);
-
filter: blur(1px);
-
}
-
-
.container .img-wrap img {
-
max-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.50);
-
-webkit-transform: rotate(0deg) scale(1.50);
-
z-index: 2;
-
position: relative;
-
-webkit-filter: blur(0px);
-
-moz-filter: blur(0px);
-
-ms-filter: blur(0px);
-
-o-filter: blur(0px);
-
filter: blur(0px);
-
cursor: pointer;
-
}
-
-
.container .img-wrap:active {
-
background: rgba(50, 50, 50, 0.3);
-
box-shadow: none;
-
border: none;
-
width: 100%;
-
height: 100%;
-
margin: auto;
-
text-align: center;
-
align-items: center;
-
transform: rotate(0deg) translate(-50%, -50%);
-
-webkit-transform: rotate(0deg) translate(-50%, -50%);
-
-webkit-filter: blur(0px);
-
-moz-filter: blur(0px);
-
-ms-filter: blur(0px);
-
-o-filter: blur(0px);
-
filter: blur(0px);
-
position: absolute;
-
z-index: 3;
-
left: 50%;
-
top: 50%;
-
cursor: zoom-in;
-
}
-
-
.container .img-wrap:active img {
-
align-items: center;
-
max-height: 600px;
-
margin-top: 10%;
-
}
-
</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>
文章来源: albertyang.blog.csdn.net，作者：Albert Yang，版权归原作者所有，如需转载，请联系作者。
原文链接：albertyang.blog.csdn.net/article/details/106934982