[分享]css3手风琴图片显示

CSS3手风琴效果是在网页设计中非常常见的一种展示图片的方式，下面我们来了解一下。/ HTML代码 / 图片1的介绍 图片2的介绍 图片3的介绍 / CSS代码 / .accor...

CSS3手风琴效果是在网页设计中非常常见的一种展示图片的方式，下面我们来了解一下。

/* HTML代码 */
<div class="accordion">
  <div class="item">
    <img src="image1.jpg" alt="图片1">
    <p>图片1的介绍</p>
  </div>
  <div class="item">
    <img src="image2.jpg" alt="图片2">
    <p>图片2的介绍</p>
  </div>
  <div class="item">
    <img src="image3.jpg" alt="图片3">
    <p>图片3的介绍</p>
  </div>
</div>

/* CSS代码 */
.accordion {
  display: flex;
  flex-wrap: wrap;
}
.item {
  position: relative;
  width: 33.33%;
  height: 200px;
  overflow: hidden;
  transition: width 0.3s ease-in-out;
}
.item:hover {
  width: 66.66%;
}
.item img {
  width: 100%;
  height: 100%;
  transform: scale(1.2);
  transition: transform 0.3s ease-in-out;
}
.item:hover img {
  transform: scale(1);
}
.item p {
  position: absolute;
  bottom: 0;
  width: 100%;
  margin: 0;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 16px;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
.item:hover p {
  opacity: 1;
} 

在这段代码中，我们首先使用了flex布局使图片在父元素中排列，然后定义了.item为相对定位，设置了图片为scale放大1.2倍，并在鼠标悬浮时恢复原来大小，同时在鼠标悬浮时将.item的宽度调整为原来的2倍。这个效果即可实现手风琴展开的效果。

同时，我们在每个.item中添加了图片介绍，当鼠标悬浮时，以一个半透明的背景显示图片介绍文字，通过opacity属性的变化实现了淡入淡出的效果，为页面增加了些许的动态感。

总之，CSS3手风琴效果是展示图片、文字等内容的一种很好的方式，可以为页面增加不少美感和动态效果。