CSS3实现手风琴效果

我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

前言

最近写了好几篇实现有点小效果的文章，感觉都才思枯竭了，可是为了薅点小羊毛，需要坚持写下去。想起很久之前写过使用js实现手风琴的小效果，今天来用css实现看看

码上掘金

页面展示五个li元素，当鼠标移入其中一个元素时，对应元素的宽度变大，同时对应的文字描述显示，其它兄弟元素的宽度变小。 具体效果：

code.juejin.cn/pen/7145456…

具体实现

1.html核心代码

主要由5个li元素组成，每个li元素包含一个展示图片元素和展示文字元素（ps:其中图片人物和文字都是引用白茶的插画绘本《吾皇巴扎黑》，很好看的一部漫画。）

图片是网上找的相关图片，由于图片链接过长，在展示代码中去掉了，如果有需要可以在码上掘金获取

<ul class="accordion">
  <li class="tab">
    <div class="personal-image">
      <img src="" alt="">
    </div>
    <div class="content">
      <h1>吾皇</h1>
      <p>就喜欢你看不惯我又干不掉我的样子。</p>
    </div>
  </li>
  <li class="tab">
    <div class="personal-image">
      <img src="" alt="">
    </div>
    <div class="content">
      <h1>巴扎黑</h1>
      <p>你若不离不弃，我必生死相依。</p>
    </div>
  </li>
  <li class="tab">
    <div class="personal-image">
      <img src="" alt="">
    </div>
    <div class="content">
      <h1>人中</h1>
      <p>长大了就不怕离开你了吗？</p>
    </div>
  </li>
  <li class="tab">
    <div class="personal-image">
      <img src="" alt="">
    </div>
    <div class="content">
      <h1>牛能</h1>
      <p>就当是一场梦，醒来还是很...能醒来吗？</p>
    </div>
  </li>
  <li class="tab">
    <div class="personal-image">
      <img src="" alt="">
    </div>
    <div class="content">
      <h1>翅中</h1>
      <p>可以做朋友么?</p>
    </div>
  </li>
</ul>

2.css核心代码

a. 使用flex布局，让5个li元素在水平方向上两端对齐显示，并且每个li的宽度是一样的。一开始只显示图片元素，并且图片元素100%展示

.accordion {
  width: 100%;
  height: 65vh;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
}
.tab {
  width: 20%;
  height: 100%;
  border: 1px solid #333;
  display: flex;
  transition: all .5s ease;
}
.personal-image{
  width: 100%;
  height: 100%;
  transition: all .5s ease;
}
.personal-image img{
  display: block;
  width: 100%;
  height: 100%;
}

b. 实现li元素的hover效果（手风琴效果），需要改变宽度的元素（如li元素、图片元素、文字元素），要添加transition属性，让宽度实现平缓的增加

c. 文字元素中的人物名字和话语需要实现文字竖向排版，这两个元素设置width为该元素中文字的font-size大小，有标点符号的时候需要加上这段css代码word-wrap: break-word;，实现自动换行

.tab .content {
  width: 0;
  height: 100%;
  background-color: #fff;
  color: #333;
  padding: 30px ;
  display: none;
  transition: all .5s ease;
  position: relative;
}
.tab .content h1 {
  width: 24px;
  font-size: 24px;
  position: absolute;
  bottom: 20px;
  right: 20px;
}

.tab .content p {
  width: 16px;
  font-size: 16px;
  margin:  0 auto;
  word-wrap: break-word;
}

d. 简单调整了手机端的效果展示，只展示了图片元素

@media(max-width:768px) {
  .container{
    transform: scale(1.2);
  }
  .accordion{
    height: 22vh;
  }
  .tab:hover .personal-image{
    width: 100%;
  }
  .tab:hover .content {
    width: 0;
    display: none;
  }
}

根据以上的实现，就可以简单做出手风琴效果了