CSS動畫在網頁設計中是非常常見的一個元素，能夠為用戶帶來更為豐富的體驗。今天我們要來介紹一種非常有趣的效果——抽紙動畫。

.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，實現了展開的效果。

抽紙動畫效果的實現很簡單，但是卻非常有趣，可以為網站帶來更加生動活潑的體驗，增強用戶的互動性和使用體驗。