JS特效第107弹：jQuery+css3相册图片叠加堆放展开动画特效

以下是一个使用jQuery和CSS3创建相册图片叠加堆放展开动画的示例代码：

HTML部分：

<div id="gallery">
  <div class="item">
    <img src="image1.jpg" alt="Image 1">
    <div class="overlay"></div>
  </div>
  <!-- 其他图片项 -->
</div>

CSS部分：

#gallery .item {
  position: relative;
  width: 200px;
  height: 200px;
  float: left;
  margin: 10px;
  overflow: hidden;
}
 
#gallery .item img {
  width: 100%;
  height: auto;
  transition: transform 0.5s ease-in-out;
}
 
#gallery .item .overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
  transform: translateY(100%);
}
 
/* 其他样式 */

jQuery部分：

$(document).ready(function() {
  $('#gallery .item').hover(function() {
    // 鼠标悬停时
    $(this).find('img').css({
      transform: 'scale(1.1)'
    });
    $(this).find('.overlay').css({
      opacity: 1,
      transform: 'translateY(0)'
    });
  }, function() {
    // 鼠标移出时
    $(this).find('img').css({
      transform: 'scale(1)'
    });
    $(this).find('.overlay').css({
      opacity: 0,
      transform: 'translateY(100%)'
    });
  });
});

这段代码实现了当鼠标悬停在相册图片上时，图片会缩放并且叠加层会由上向下展开的堆放开展动画效果。鼠标移出时，动画效果逆向播放，恢复到原始状态。这是一个典型的利用CSS3的transform和transition属性制作的动画效果。