用纯css实现手风琴动态效果

使用CSS实现手风琴（Accordion）动态效果主要是通过CSS的`display`, `transition`, 和 `flexbox` 或者 `grid` 来控制元素的折叠和展开。以下是一个简单的步骤说明：

1. **HTML结构**:

   <div class="accordion">
     <div class="accordion-item">
       <header>标题 1</header>
       <p>内容 1</p>
     </div>
     <!-- 添加更多项 -->
   </div>

2. **基本样式**:

   .accordion {
     display: flex;
     flex-direction: column;
     gap: 1rem; /* 控制项目之间的间距 */
   }
   
   .accordion-item {
     transition: height 0.3s ease; /* 加上过渡效果 */
     overflow: hidden;
     border-bottom: 1px solid #ccc;
   }

   .accordion-item.opened {
     height: auto; /* 展开时高度变为自动 */
   }

3. **点击事件处理（伪代码）**:
使用JavaScript添加点击事件监听器，切换`.accordion-item`的`opened`类，改变其`height`属性来触发动画：

   const accordionItems = document.querySelectorAll('.accordion-item');
   
   accordionItems.forEach(item => {
     item.addEventListener('click', () => {
       item.classList.toggle('opened');
     });
   });

4. **响应式调整**:
如果需要，可以使用媒体查询针对不同的屏幕尺寸调整CSS。