[分享]css3抽纸动画

CSS3是现代网页设计中的重要技术之一，它为网页开发带来了许多有趣的功能，其中之一就是抽纸动画。 抽纸动画可以为你的网页增添趣味性，同时也可以提高用户的交互体验。本文将介绍如何使用CSS3创建抽纸动画...

CSS3是现代网页设计中的重要技术之一，它为网页开发带来了许多有趣的功能，其中之一就是抽纸动画。 抽纸动画可以为你的网页增添趣味性，同时也可以提高用户的交互体验。本文将介绍如何使用CSS3创建抽纸动画。

/* HTML代码 */
<div class="tissue-box">
  <div class="tissue"></div>
</div>

/* CSS代码 */
.tissue-box {
  width: 100px;
  height: 120px;
  border: 2px solid #ddd;
  position: relative;
  margin: 50px auto;
}

.tissue {
  width: 80px;
  height: 80px;
  background-color: #fff;
  position: absolute;
  bottom: -2px;
  left: 10px;
  transition: all 0.5s ease;
}


.tissue-box:hover .tissue {
  bottom: 80px;
} 

上面的代码创建了一张纸巾盒，纸巾位置在盒子底部。 当鼠标悬停在盒子上时，纸巾会从底部升起。 首先，我们将盒子定位为相对元素。 然后，我们将纸巾位置设为绝对位置，底部和左侧相对盒子定位。 我们还添加了一个转换属性，使纸巾贴到底部。

接下来，我们为纸巾添加了一个鼠标悬停状态，当悬停在盒子上时，纸巾将向上移动到指定高度。 我们使用过渡属性，使动画变得平滑。

最后，我们只要在HTML中调用这些类名即可实现抽纸动画。这是一个很简单但非常有效的CSS3功能。