我們經常會看到一些網站上，書頁會通過動畫的形式把角翻起來，這種效果可以通過CSS來實現。下面我們來看一下如何實現一個簡單的書頁卷角動畫。

/* 設置樣式，給書頁添加邊框和背景色 */
.book {
border: 1px solid #ddd;
background-color: white;
position: relative;
width: 300px;
height: 400px;
margin: 20px auto;
}
/* 在書頁的右下角添加一個小三角形 */
.book::before {
content: "";
position: absolute;
bottom: -20px;
right: -20px;
border-top: 20px solid transparent;
border-right: 20px solid #ddd;
border-bottom: 20px solid #ddd;
border-left: 20px solid transparent;
}
/* 當鼠標移動到書頁上時，給書頁卷角添加動畫效果 */
.book:hover::before {
border-top: 20px solid #ddd;
border-right: 20px solid transparent;
animation: curl 0.5s ease-in-out;
}
/* 定義卷角動畫 */
@keyframes curl {
0% {
transform: rotate(0deg);
}
20% {
transform: rotate(10deg);
}
40% {
transform: rotate(20deg);
}
60% {
transform: rotate(40deg);
}
80% {
transform: rotate(60deg);
}
100% {
transform: rotate(90deg);
}
}

代碼中，我們首先定義了一個.book的樣式，添加了邊框和背景色，并設置為相對定位。接著，在.book::before偽元素中添加了一個小三角形，讓它顯示在書頁的右下角。通過設置三角形的顏色和邊框寬度，實現了書頁右下角的卷角效果。

最后，在.book:hover::before中，我們定義了一個卷角動畫。這個動畫的關鍵是通過transform: rotate()來實現角度的變化。在定義動畫的過程中，我們讓書頁卷角一步步地旋轉，最后變成90度，即呈現出書頁被翻起來的效果。

通過以上的代碼，我們就可以實現一個簡單的書頁卷角動畫了。讀者可以根據自己的需求進行修改，增加更多的效果，創造出更有趣的頁面。