用css实现手风琴动态兄啊过

CSS可以配合JavaScript实现简单的手风琴动画效果，这种效果通常通过CSS的`display`属性和JavaScript控制元素的隐藏和显示来达成。以下是基本步骤：

1. **HTML结构**:

<div class="accordion">
  <div class="accordion-item">
    <button id="item1">标题1</button>
    <div class="content">
      内容1
    </div>
  </div>
  <!-- 添加更多的项 -->
</div>

2. **CSS样式**:

.accordion {
  width: 100%;
}

.accordion-item {
  border-bottom: 1px solid #ccc;
  position: relative;
}

.content {
  display: none;
  padding: 10px;
}

.active .content {
  display: block;
}

3. **JavaScript/jQuery (可选)**:

// 或者使用jQuery
$('.accordion-item button').click(function() {
  $(this).parent().find('.content').slideToggle(200); // 动态切换内容显示和隐藏
});

点击按钮时，对应的`.content`块会切换显示或隐藏。