使用 css 动画实现了一个当鼠标悬浮在图片上时放大展示的照片墙，效果图如下：
以下直接附上源码，图片可自己随意设置，所有图片放在与源码 .html 文件同级的 img2 文件夹内：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>照片墙</title>
<style>
body {
background-color: #F5F5DC;
}
.box {
margin: auto;
width: 1000px;
height: 600px;
position: relative;
}
.box img {
border: 1px solid white;
padding: 10px;
width: 300px;
box-shadow: 1px 1px 5px #666;
border-radius: 10px;
transition: all 1s;
}
.box img:hover {
transform: scale(1.5,1.5);
z-index: 1;
}
.img1 {
position: absolute;
top: 181px;
left: 300px;
transform: rotate(45deg);
}
.img2 {
position: absolute;
top: 248px;
left: 142px;
transform: rotate(-25deg);
}
.img3 {
position: absolute;
top: 97px;
left: 472px;
transform: rotate(15deg);
}
.img4 {
position: absolute;
top: 280px;
left: 531px;
transform: rotate(-65deg);
}
.img5 {
position: absolute;
top: 133px;
left: 93px;
transform: rotate(40deg);
}
.img6 {
position: absolute;
top: 393px;
left: 318px;
transform: rotate(-30deg);
}
</style>
</head>
<body>
<div class="box">
<img src="img2/111.jpg" class="img1">
<img src="img2/222.jpg" class="img2">
<img src="img2/333.jpg" class="img3">
<img src="img2/444.jpg" class="img4">
<img src="img2/555.jpg" class="img5">
<img src="img2/666.jpg" class="img6">
</div>
</body>
</html>