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

.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);
}

上面是實現(xiàn)抽紙動畫的CSS代碼，在paper類中，我們首先定義了紙張的寬度、高度、位置和邊距。然后，我們定義了兩個子類，分別是cover和sheet。cover表示紙張的頂部，這里我們設(shè)置它的高度為10px，顏色為白色，然后居中顯示并和紙張一起絕對定位。sheet表示紙張底部的一張新紙，高度默認(rèn)為0，顏色也為白色，因為這部分紙張默認(rèn)處于未展開狀態(tài)，所以我們將其透明度設(shè)置為0。接下來，我們需要在觸發(fā)鼠標(biāo)懸浮事件時改變cover和sheet的屬性，這里我們是將cover的高度變?yōu)榧垙埖囊话耄鴮heet變?yōu)榧垙埖娜撸瑫r將透明度設(shè)置為1，實現(xiàn)了展開的效果。

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