[分享]css3拉帘式遮罩相册

CSS3是一个非常强大的前端技术，可以很轻松地实现许多炫酷的效果，比如拉帘式遮罩相册。下面我们就来看看如何使用CSS3来实现这个效果。 .wrapper { : relative; wi...

CSS3是一个非常强大的前端技术，可以很轻松地实现许多炫酷的效果，比如拉帘式遮罩相册。下面我们就来看看如何使用CSS3来实现这个效果。

 <div class="wrapper">
    <img src="image1.jpg" alt="image 1" class="image active" />
    <img src="image2.jpg" alt="image 2" class="image" />
    <img src="image3.jpg" alt="image 3" class="image" />
    <img src="image4.jpg" alt="image 4" class="image" />
    <div class="mask"></div>
  </div>

  <style>
    .wrapper {
      position: relative;
      width: 600px;
      height: 400px;
      margin: 50px auto;
    }

    .wrapper img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: opacity 0.5s ease-in-out;
    }

    .wrapper .active {
      opacity: 1;
    }

    .mask {
      position: absolute;
      top: 0;
      left: 0;
      width: 600px;
      height: 400px;
      background: linear-gradient(to bottom, transparent, black);
      transition: opacity 0.5s ease-in-out;
    }

    .wrapper:hover .mask {
      opacity: 0.5;
    }
  </style> 

首先，我们需要一个包含多张图片的容器。这个容器的宽度和高度是固定的，可以根据实际情况进行调整。每张图片都需要设置为绝对定位，同时覆盖在容器的最上层，使用object-fit属性可以让图片保持原始比例，并在容器中居中显示。在每张图片上设置过渡效果，当图片的不透明度改变时会自动平滑地过渡。

接下来，我们需要一个遮罩层，使用线性渐变可以让遮罩层从底部逐渐变成透明，同时也不会完全遮挡图片。当鼠标移动到容器上时，遮罩层的不透明度会自动降低，露出部分图片，形成拉帘式遮罩的效果。

通过简单的CSS3代码，我们就可以轻松地创建一个拉帘式遮罩相册了。