[分享]css3图片手风琴展示特效代码

CSS3图片手风琴展示特效是一种常见的网页设计特效。下面我们来介绍该特效的实现方式。

.accordion {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 350px;
}

.accordion .item {
  flex: 1;
  height: 100%;
  background-size: cover;
  background-position: center center;
  transition: all 0.5s ease-in-out;
  position: relative;
}

.accordion .item.active {
  flex: 5;
}

.accordion .item.active .overlay {
  opacity: 0.7;
}

.accordion .item .overlay {
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.5s ease-in-out;
}

.accordion .item .content {
  color: #fff;
  font-size: 3rem;
  font-weight: bold;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.accordion .item:hover {
  flex: 2;
}

.accordion .item:hover .overlay {
  opacity: 0.4;
} 

代码中，我们首先定义了一个accordion类，这是一个flex布局的容器，高度为350像素。每一个item类表示我们每个图片的容器，我们定义了一个flex属性，把每个item的高度拉满整个容器。同时，我们给每个item设置了背景图，鼠标悬停时图片会变大，并挡住其他图片，通过设置overlay的opacity属性使其透明度从0到0.4渐变。最后，我们在每个item里设置了一个content类，来控制图片文字的样式和位置。