[分享]css3拍照墙

CSS3拍照墙是一个很酷的特效，可以为网站增添一份时尚感，下面简单介绍一下如何实现。

/* HTML代码 */
<div class="photo-wall">
  <img src="img/1.jpg" alt="photo">
  <img src="img/2.jpg" alt="photo">
  <img src="img/3.jpg" alt="photo">
  <img src="img/4.jpg" alt="photo">
  <img src="img/5.jpg" alt="photo">
</div>

/* CSS代码 */
.photo-wall {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.photo-wall img {
  width: 200px;
  height: 200px;
  margin: 20px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  transition: transform 0.5s ease;
}
.photo-wall img:hover {
  transform: scale(1.1);
} 

以上代码实现了一个简单的拍照墙效果，主要使用Flex布局，将图片放在一个容器中，使用定宽和高来设置每个图片的大小和间距，添加阴影和圆角可以增强图片的立体感，使用CSS3的transform属性的scale函数实现鼠标hover时图片的放大效果。