[分享]css3收起动画

CSS3可以实现各种各样的动画效果，其中，收起动画也是非常常见的一种。实现CSS3收起动画的方法，我们可以使用一些内置的属性和选择器，如：transition、maxheight、:hover、:ta...

CSS3可以实现各种各样的动画效果，其中，收起动画也是非常常见的一种。实现CSS3收起动画的方法，我们可以使用一些内置的属性和选择器，如：transition、max-height、:hover、:target等。下面，我们就来一起看看如何实现CSS3收起动画。

/* 首先设置我们的HTML结构 */
<div class="panel">
  <h3 class="panel-title">点击这里展开</h3>
  <div class="panel-content">
    <p>这里是要被收起的内容。</p>
    <p>这里是要被收起的内容。</p>
    <p>这里是要被收起的内容。</p>
  </div>
</div>

/* 接下来，我们给.panel-content添加相应的CSS样式 */
.panel-content {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease-out;
}

/* 当我们鼠标悬浮在.panel-title上时，通过使用:target选择器来展开内容 */
.panel-title:hover, 
.panel-title:target {
  cursor: pointer;
}

.panel-title:hover + .panel-content, 
.panel-title:target + .panel-content {
  max-height: 200px;
  transition: max-height 0.4s ease-in;
} 

上述代码中，我们首先给.panel-content添加了一些基本的CSS样式，其中max-height设置为0，这样我们的内容在一开始时是被隐藏的。接下来，当我们鼠标悬浮在.panel-title上时，通过使用:hover和:target选择器来展开内容，将max-height的值设置为200px，实现了一个平滑的收起动画效果。

除此之外，我们还可以通过设置position、opacity等属性，结合CSS3的关键帧动画，来实现更加丰富的收起动画效果。这里就不再赘述，需要大家自行查阅相关资料。总的来说，CSS3收起动画非常实用，可以大大提升我们的网页体验，希望本文能对大家有所帮助。