CSS3制作精致的照片墙特效

CSS3 制作精致的照片墙特效攻略

照片墙是网页设计常用的一种效果，具有展示多张图片的优点。在本文中，我们将使用 CSS3 技术来制作一个精致的照片墙特效。

设计思路

我们需要先设计出自己想要的照片墙效果，目前市面上有很多的照片墙效果，例如瀑布流式布局，叠加式布局等等。在本文中，我们将使用的是一种四列等分的照片墙效果，每张图片被等分为四个方块分别展示。鼠标悬浮在图片上时，图片会变暗并出现一个放大的特效。

HTML 结构

我们的 HTML 结构需要包含每个图片的一个容器 div ，如下所示：

<div class="photo-grid">
  <div class="photo-item">
    <img src="image/1.jpg" alt="">
  </div>
  <div class="photo-item">
    <img src="image/2.jpg" alt="">
  </div>
  <div class="photo-item">
    <img src="image/3.jpg" alt="">
  </div>
  ...
</div>

CSS 样式

我们需要使用 CSS 样式来实现照片墙的布局与特效，具体样式如下：

/* 照片墙容器的样式 */
.photo-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

/* 每个图片的容器样式 */
.photo-item {
  position: relative;
  width: 25%;
}

/* 每个图片样式 */
.photo-item img {
  width: 100%;
  height: auto;
  transition: all .3s ease-in-out;
}

/* 鼠标悬浮时，给图片添加遮罩和放大效果 */
.photo-item:hover img {
  transform: scale(1.1);
  filter: brightness(.5);
}

/* 遮罩效果 */
.photo-item::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transition: opacity .3s ease-in-out;
}

/* 鼠标悬浮时，遮罩显示 */
.photo-item:hover::before {
  opacity: 1;
  background-color: rgba(0,0,0, .5);
}

示例说明

这里展示两个实际案例，说明如何使用 CSS3 制作精美的照片墙特效：

示例一：纯 CSS 瀑布流照片墙

网页效果：https://codepen.io/yyssccll/pen/WBXNex

本示例展示的是一种纯 CSS 制作的瀑布流照片墙，实现了图片自适应宽度，支持自动加载数据等多种功能。

示例二：基于 jQuery 的照片墙特效

网页效果：https://tympanus.net/Development/Stapel/

本示例展示了一种基于 jQuery 的照片墙特效，支持多种布局，可以自定义每个图片的大小，使用方便。