css实现的相册切换效果

相册切换效果是网站设计中的重要效果之一。实现这种效果可以使用CSS来达到，下面我们来看看如何通过CSS来实现相册切换效果。

.gallery {
  display: flex;
  flex-wrap: wrap;
}

.gallery img {
  width: 100%;
  height: auto;
  transition: opacity 0.5s ease-in-out;
}

.gallery img:not(:first-of-type) {
  opacity: 0;
}

.gallery input {
  display: none;
}

.gallery input:checked+label+img {
  opacity: 1;
}

首先，我们需要将相册的图片放在一个flex容器中，这里使用了display:flex和flex-wrap:wrap来实现下一行显示图片的效果。接着，我们对每一个图片设置了宽为100%的属性，同时使用了过渡效果。

由于我们希望页面一开始只显示第一张图片，因此需要为所有非第一张图片设置透明度为0的属性。这里使用了:not(:first-of-type)伪类来实现。

接着，我们需要隐藏原始的input元素，使用label元素来实现图片的切换。当使用者点击不同的label元素时，对应的input会被选中，并且对应的图片的opacity属性会被设置为1，实现图片切换的效果。

通过这些简单的CSS代码，我们就可以实现一个相册切换效果，并且可以自由控制每一个图片的渐变时间和效果，让页面更加生动。