[分享]css3手风琴效果

CSS3手风琴效果是一种非常炫酷的网页动画特效，它可以让网页元素在点击或者鼠标悬停时呈现展开、折叠或者滑动的视觉效果。代码示例： HTML代码： 段落1 这是段落1的内容 段落2 这是段落2的...

CSS3手风琴效果是一种非常炫酷的网页动画特效，它可以让网页元素在点击或者鼠标悬停时呈现展开、折叠或者滑动的视觉效果。

代码示例：

HTML代码：
<div class="accordion">
  <div class="accordion-header">段落1</div>
  <div class="accordion-content">
    <p>这是段落1的内容</p>
  </div>
  <div class="accordion-header">段落2</div>
  <div class="accordion-content">
    <p>这是段落2的内容</p>
  </div>
  <div class="accordion-header">段落3</div>
  <div class="accordion-content">
    <p>这是段落3的内容</p>
  </div>
</div>

CSS代码：
.accordion {
  overflow: hidden;
}
.accordion-header {
  background: #1abc9c;
  color: #fff;
  cursor: pointer;
  padding: 10px;
}
.accordion-content {
  background: #f2f2f2;
  padding: 10px;
  display: none;
}
.accordion.active .accordion-content {
  display: block;
}

JavaScript代码：
var accordions = document.querySelectorAll('.accordion');

accordions.forEach(function(accordion) {
  accordion.addEventListener('click', function() {
    this.classList.toggle('active');
  });
}); 

上面的代码中，我们首先定义了一个包含了三个折叠段落的div容器，每个段落都有一个标题和相应的内容。然后我们在CSS中定义了标题和内容的样式，其中标题具有醒目的背景颜色和鼠标指针悬停效果，而内容则被隐藏起来。最后，在JavaScript中编写事件监听函数，当用户点击标题时，我们会动态地向相应的div容器添加一个class类名，这会触发CSS中的一些样式属性的改变，从而实现了手风琴效果。