html手风琴效果

HTML手风琴效果可以使用CSS的伪类:hover和transition属性来实现。以下是一个简单的示例代码：

HTML代码：

<div class="accordion">
  <div class="accordion-item">
    <div class="accordion-header">标题1</div>
    <div class="accordion-content">内容1</div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">标题2</div>
    <div class="accordion-content">内容2</div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">标题3</div>
    <div class="accordion-content">内容3</div>
  </div>
</div>

CSS代码：

.accordion {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.accordion-item {
  border: 1px solid #ccc;
  margin-bottom: 10px;
}

.accordion-header {
  background-color: #eee;
  padding: 10px;
  cursor: pointer;
}

.accordion-header:hover {
  background-color: #ddd;
}

.accordion-content {
  padding: 10px;
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease;
}

.accordion-item.active .accordion-content {
  height: auto;
}

在CSS中，我们定义了一个flex容器，并将子元素设置为纵向排列。每个手风琴项目都由一个标题和一个内容组成。当鼠标悬停在标题上时，标题的背景颜色将变为浅灰色。当我们点击标题时，它的父元素将获得一个.active类，这将触发内容的高度从0到auto的过渡动画。