[分享]css3手风琴轮播

CSS3手风琴轮播是一种比较常见的网页轮播效果，通过利用CSS3的属性以及JavaScript的交互实现，可以让网页更加生动有趣，下面就说明一下如何实现。HTML结构： Title 1 De...

CSS3手风琴轮播是一种比较常见的网页轮播效果，通过利用CSS3的属性以及JavaScript的交互实现，可以让网页更加生动有趣，下面就说明一下如何实现。

HTML结构：
<ul>
  <li>
    <div class="banner-item">
      <img src="1.jpg">
      <div class="banner-text">
        <p>Title 1</p>
        <p>Description 1</p>
      </div>
    </div>
  </li>
  <li>
    <div class="banner-item">
      <img src="2.jpg">
      <div class="banner-text">
        <p>Title 2</p>
        <p>Description 2</p>
      </div>
    </div>
  </li>
  <li>
    <div class="banner-item">
      <img src="3.jpg">
      <div class="banner-text">
        <p>Title 3</p>
        <p>Description 3</p>
      </div>
    </div>
  </li>
</ul>

CSS样式：
ul {
  overflow: hidden;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

li {
  float: left;
  width: 33.33%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.banner-item {
  position: relative;
  height: 100%;
}

.banner-item img {
  width: 100%
}

.banner-text {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: rgba(0,0,0,0.5);
  color: #fff;
  text-align: center;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

li:hover .banner-text {
  transform: translateY(0%);
} 

通过HTML结构和CSS样式的设定，就可以实现CSS3手风琴轮播效果。其中，HTML结构包含一个ul和多个li的列表项，每个li包含一张图片和文字区域。CSS样式则定义了ul和li的样式，以及图片和文字区块的样式，并通过CSS3的transition实现了鼠标悬停时的动态效果。