[分享]css3折叠面板动画

CSS3折叠面板动画通过CSS3的transform属性，使得面板在打开或收起的过程中产生动画效果，让页面更加生动。代码如下： HTML： 面板头部1 面板内容1 面板头部2 面板内容2 ...

CSS3折叠面板动画通过CSS3的transform属性，使得面板在打开或收起的过程中产生动画效果，让页面更加生动。

代码如下：

HTML：
<div class="accordion">
  <div class="panel">
    <div class="panel-header">面板头部1</div>
    <div class="panel-content">面板内容1</div>
  </div>
  <div class="panel">
    <div class="panel-header">面板头部2</div>
    <div class="panel-content">面板内容2</div>
  </div>
</div>

CSS：
.accordion {
  display: block;
  width: 100%;
}
.panel {
  display: block;
  width: 100%;
  margin: 0 auto;
}
.panel-header {
  display: block;
  width: 100%;
  height: 30px;
  line-height: 30px;
  background-color: #eee;
  cursor: pointer;
}
.panel:hover .panel-header {
  background-color: #ddd;
}
.panel-content {
  display: none;
  padding: 10px;
  background-color: #fff;
  overflow: hidden;
}
.panel.open .panel-content {
  display: block;
}
.panel.open .panel-header::after {
  content: '-';
  position: absolute;
  right: 10px;
  font-size: 20px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
.panel.closed .panel-header::after {
  content: '+';
  position: absolute;
  right: 10px;
  font-size: 20px;
  transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
}
.panel-transition {
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}
.panel.open .panel-content {
  -webkit-transform: scaleY(1);
  -moz-transform: scaleY(1);
  -ms-transform: scaleY(1);
  transform: scaleY(1);
  -webkit-transform-origin: top;
  -moz-transform-origin: top;
  -ms-transform-origin: top;
  transform-origin: top;
}
.panel.closed .panel-content {
  -webkit-transform: scaleY(0);
  -moz-transform: scaleY(0);
  -ms-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: top;
  -moz-transform-origin: top;
  -ms-transform-origin: top;
  transform-origin: top;
} 

上面的代码中，panel-header是面板的头部，panel-content是面板的内容。在CSS中，使用transform属性实现了面板收起和打开的效果，同时加上了动画过渡效果，让界面更加生动。