使用CSS3实现手风琴效果_css手风琴-CSDN博客

本文链接：https://blog.csdn.net/weixin_46455846/article/details/141163744

    <div class="accordion">
      <ul>
        <li>
          <div class="title">
            <a href="#">1</a>
          </div>
          <a href="#">
            <img height="700" src="@/assets/img/pd1.jpg" alt="" />
          </a>
        </li>
        <li>
          <div class="title">
            <a href="#">2</a>
          </div>
          <a href="#">
            <img height="700" src="@/assets/img/pd2.jpg" alt="" />
          </a>
        </li>
        <li>
          <div class="title">
            <a href="#">3</a>
          </div>
          <a href="#">
            <img height="700" src="@/assets/img/pd3.jpg" alt="" />
          </a>
        </li>
        <li>
          <div class="title">
            <a href="#">4</a>
          </div>
          <a href="#">
            <img height="700" src="@/assets/img/pd4.jpg" alt="" />
          </a>
        </li>
        <li>
          <div class="title">
            <a href="#">5</a>
          </div>
          <a href="#">
            <img height="700" src="@/assets/img/pd5.jpg" alt="" />
          </a>
        </li>
      </ul>
    </div>

<style scoped>
/* 手风琴样式 */
.accordion {
  width: 1700px;
  height: 600px;
  overflow: hidden;
  margin: 70px auto;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.4);
}
.accordion ul {
  width: 1800px;
}
.accordion li {
  display: block;
  width: 340px;
  height: 600px;
  overflow: hidden;
  position: relative;
  float: left;
  border-left: 0px solid #aaa;
  box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.4);
  transition: all 0.5s;
}
.accordion li img {
  display: block;
}
.accordion ul:hover li {
  width: 120px;
}
.accordion ul li:hover {
  width: 1230px;
}
.accordion .title {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1230px;
  background: rgba(0, 0, 0, 0.295);
}
.accordion .title a {
  display: block;
  color: #999;
  font-size: 16px;
  padding: 20px;
}
</style>