css图切换效果图

CSS图切换效果是网站设计中常见的一种交互效果。它可以为网站添加视觉上的吸引力，同时也能改善用户体验。下面我们来演示一下如何使用 CSS 实现图切换效果。

// HTML 代码

  

    

  上一张
  下一张


// CSS 代码
.container {
  position: relative;
  width: 600px;
  height: 400px;
  margin: 0 auto;
  text-align: center;
}

.image-wrapper {
  position: relative;
}

img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity .5s;
}

img.active {
  opacity: 1;
}

.button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background-color: #000;
  color: #fff;
  padding: 12px 24px;
  cursor: pointer;
  transition: all .3s;
}

.button:hover {
  background-color: #fff;
  color: #000;
}

#prev {
  left: 0;
}

#next {
  right: 0;
}

首先我们需要将 container 容器设置为相对定位，并为其设置宽度和高度，以便容纳图片和按钮。接着，我们将 image-wrapper 设置为相对定位，将其内部的 img 设置为绝对定位，并让所有图片的透明度都设置为 0。

接下来，我们给某张图片添加一个 active 类，用于标识当前显示的图片。这个类将为该图片添加一个透明度为 1 的过渡效果，使其逐渐显现出来。在 CSS 中，过渡效果可以使用 transition 属性来实现。

最后，我们为上一张和下一张按钮分别添加一个 ID，然后使用绝对定位将其放在容器的左右两侧。当用户点击按钮时，我们使用 JavaScript 修改图片的 active 类即可完成图片的切换。