css3手风琴动画 |css 微软雅黑 21px

.accordion {
width: 100%;
}
.accordion-header {
background-color: #333;
color: #fff;
cursor: pointer;
padding: 10px;
border-bottom: 1px solid #666;
}
.accordion-header:hover {
background-color: #555;
}
.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}
.accordion-content-active {
max-height: 500px;
transition: max-height 0.3s ease-in;
}
.accordion-header.active {
background-color: #555;
}

首先，大家需要一个包含头部和内容的容器。头部和内容的部分都是通过div元素来实现的，然后大家会为它们添加CSS样式。需要注意的是，内容部分一开始是不可见的。

头部一
内容一
头部二
内容二
头部三
内容三

接下来，大家通过CSS来实现动画效果。.accordion-header类表示头部样式，.accordion-content类表示内容样式。大家给内容部分添加了一个max-height属性，在执行动画时，它的值会从0逐渐变到最大高度，实现了展开效果。.accordion-header.active类表示当前打开的头部样式。

最后，大家需要使用jQuery来实现鼠标点击事件，来使得效果展开和收缩，示例代码如下。

$('.accordion-header').on('click', function() {
$(this).toggleClass('active');
$(this).next('.accordion-content').toggleClass('accordion-content-active');
});

这样就实现了一个完整的CSS3手风琴动画效果。