CSS可以實現許多炫酷的效果，其中向上翻頁效果也不例外。下面來介紹一下如何使用CSS來實現向上翻頁效果。

/*首先，我們需要準備一些HTML結構*/
<div class="wrapper">
<ul class="list">
<li>頁面1</li>
<li>頁面2</li>
<li>頁面3</li>
</ul>
</div>
/*接著，我們給wrapper設置overflow:hidden屬性，這樣可以隱藏超出其寬高范圍的元素*/
.wrapper {
width: 100%;
height: 300px;
overflow: hidden;
}
/*然后，我們給list設置position:relative屬性，這樣可以將其定位于wrapper內部的頂部*/
.list {
position: relative;
top: 0;
}
/*接下來，我們使用偽類:before來創建一個與最后一個li等高的空白元素，用于實現向上翻頁效果*/
.list:before {
content: "";
display: block;
height: 100%;
}
/*最后，在:hover偽類下，我們使用transition和transform屬性來實現向上翻頁效果*/
.list:hover {
transition: all 0.5s ease-in-out;
transform: translateY(-100%);
}
/*完整的代碼如下所示*/

通過以上代碼，我們就實現了向上翻頁效果，當鼠標滑過list元素時，它會向上平移100%的高度。