css抽纸动画 |css中_height

.paper {
width: 300px;
height: 200px;
position: relative;
margin: 50px auto;
}
.paper .cover {
width: 100%;
height: 10px;
background-color: #fff;
position: absolute;
top: 50%;
transform: translateY(-50%);
transition: all .3s;
}
.paper .sheet {
width: 100%;
height: 0;
background-color: #fff;
position: absolute;
bottom: 0;
opacity: 0;
transform: scaleY(0);
transition: all .3s;
}
.paper:hover .cover {
height: 50%;
}
.paper:hover .sheet {
height: 100%;
opacity: 1;
transform: scaleY(1);
}

上面是实现抽纸动画的CSS代码，在paper类中，大家首先定义了纸张的宽度、高度、位置和边距。然后，大家定义了两个子类，分别是cover和sheet。cover表示纸张的顶部，这里大家设置它的高度为10px，颜色为白色，然后居中显示并和纸张一起绝对定位。sheet表示纸张底部的一张新纸，高度默认为0，颜色也为白色，因为这部分纸张默认处于未展开状态，所以大家将其透明度设置为0。接下来，大家需要在触发鼠标悬浮事件时改变cover和sheet的属性，这里大家是将cover的高度变为纸张的一半，而将sheet变为纸张的全高，同时将透明度设置为1，实现了展开的效果。

抽纸动画效果的实现很简单，但是却非常有趣，可以为网站带来更加生动活泼的体验，增强用户的互动性和使用体验。