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

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

通過以上代碼，我們就實(shí)現(xiàn)了向上翻頁效果，當(dāng)鼠標(biāo)滑過list元素時(shí)，它會(huì)向上平移100%的高度。