纯CSS实现简单酷炫的响应式照片墙效果，点击查看效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>纯CSS实现简单酷炫的响应式照片墙效果</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #1a252c;
}
.container {
width: 90%;
margin: 80px auto 0;
display: grid;
/* grid-template-columns: repeat(7, 1fr); */
grid-template-columns: repeat(7, minmax(100px, 1fr)); /* 响应宽度变化 */
gap: 5px;
transform-style: preserve-3d;
}
.photo {
aspect-ratio: 9/16; /* Chrome88 版本以上支持 */
position: relative;
transition: .5s;
-webkit-box-reflect: below 1px linear-gradient(transparent, #0002);
}
@supports not(aspect-ratio: 9/16) { /* 如果浏览器不支持 aspect-ratio: 9/16，使用如下样式*/
.photo {
height: 300px;
}
}
.photo img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.container:hover > :not(:hover) {
margin: 0 -20px;
filter: drop-shadow(0 0 25px #000) drop-shadow(0 0 45px #000);
transform: perspective(300px) rotateY(15deg) scale(0.95);
}
.container .photo:hover ~ .photo {
transform: perspective(300px) rotateY(-15deg) scale(0.95);
}
.container .photo:hover {
transform: perspective(300px) rotateY(0) scale(1.3);
}
</style>
</head>
<body>
<div class="container">
<div class="photo">
<img src="assets/00002-2229625047.png" alt="AI绘画-古风美人">
</div>
<div class="photo">
<img src="assets/00012-1424018307.png" alt="AI绘画-古风美人">
</div>
<div class="photo">
<img src="assets/00014-804803409.png" alt="AI绘画-古风美人">
</div>
<div class="photo">
<img src="assets/00017-3689859091.png" alt="AI绘画-古风美人">
</div>
<div class="photo">
<img src="assets/00028-1547087501.png" alt="AI绘画-古风美人">
</div>
<div class="photo">
<img src="assets/00042-3330016515.png" alt="AI绘画-古风美人">
</div>
<div class="photo">
<img src="assets/00125-1173898982.png" alt="AI绘画-古风美人">
</div>
</div>
</body>
</html>
