HTML5翻頁效果在網站設計中起著重要的作用，常常用于展示產品列表、圖片展示和網頁導航等。下面我們為大家分享一款簡單易用的HTML5翻頁效果，具體代碼如下：

<div class="container">
<ul id="page">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<div id="prev"></div>
<div id="next"></div>
</div>

代碼中我們創建了一個具有翻頁效果的容器，其中ul標簽內部包含了翻頁的li標簽，分別代表了每一頁的頁碼。而上一頁和下一頁的按鈕則分別使用了id為“prev”和“next”的div標簽。

.container {
width: 500px;
height: 300px;
overflow: hidden;
position: relative;
}
ul#page {
margin: 0;
padding: 0;
list-style: none;
}
ul#page li {
float: left;
width: 80px;
height: 40px;
margin: 5px;
text-align: center;
line-height: 40px;
border: 1px solid #000;
cursor: pointer;
}
.active {
background-color: #000;
color: #fff;
}
#prev, #next {
width: 30px;
height: 30px;
position: absolute;
top: 50%;
margin-top: -15px;
cursor: pointer;
}
#prev {
left: 0;
}
#next {
right: 0;
}

接下來我們給出一份基于CSS樣式表的翻頁代碼，其中我們通過設定容器的寬高和overflow屬性來實現頁面的隱藏和展示，為li標簽組設置屬性值后，使用float浮動效果實現翻頁效果；同時，為了增強用戶體驗，我們為當前頁面添加了高亮背景顏色，并為翻頁按鈕添加了鼠標懸停效果。

以上就是一份簡單實用的HTML5翻頁效果代碼示范，通過學習本文，相信大家也已經掌握了一些CSS樣式表的基本教程，可以根據自己的需要自主添加特效和優化設計，創造出屬于自己的頁面翻頁效果。