css3手风琴效果

CSS3手风琴效果可以通过使用CSS3的transition属性和伪类来实现。下面是一个简单的示例：

HTML代码：

<div class="accordion">
  <div class="item">
    <h2>标题1</h2>
    <div class="content">
      <p>内容1</p>
    </div>
  </div>

  <div class="item">
    <h2>标题2</h2>
    <div class="content">
      <p>内容2</p>
    </div>
  </div>

  <div class="item">
    <h2>标题3</h2>
    <<div class="content">
      <p>内容3</p>
    </div>
  </div>
</div>

CSS代码：

.accordion {
  display: flex;
  flex-direction: column;
  margin: 20px 0;
}

.item {
  border: 1px solid #ccc;
  margin-bottom: 10px;
  overflow: hidden;
  transition: height 0.3s ease-out;
}

.item h2 {
  background-color: #ccc;
  color: #fff;
  margin: 0;
  padding: 10px 20px;
  cursor: pointer;
}

.item.active {
  height: 200px;
}

.item.active h2 {
  background-color: #555;
}

.content {
  padding: 20px;
}

在这个例子中，我们使用了flex布局将所有的内容垂直排列。每个手风琴项由一个标题和一个内容组成。当用户点击标题时，我们使用JavaScript将.active类添加到项中。这个类将触发CSS过渡，从而平滑地展开手风琴项。

要实现手风琴效果，我们使用overflow:hidden隐藏内容，并将高度设置为0。在.active类中，我们将高度设置为一个固定值，这样就可以展开手风琴项。我们还添加了一些过渡效果，使过渡更平滑。