HTML电子书翻页效果是网站开发中常见的效果之一，通过这种效果可以让用户在浏览电子书时更加方便和自然。下面将为大家介绍一个简单的HTML电子书翻页效果代码，并附上效果演示。
首先，我们需要准备一个HTML文件，其中包含了一些文本内容和样式。代码如下：
<!DOCTYPE html>
<html>
<head>
<title>HTML电子书翻页效果演示</title>
<style>
body {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
padding: 0;
margin: 0;
}
#book {
position: relative;
width: 80%;
max-width: 800px;
margin: 0 auto;
padding: 30px;
background-color: #f2f2f2;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.page {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 30px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
transition: transform 0.5s ease-in-out;
}
</style>
</head>
<body>
<div id="book">
<div class="page">
<p>第一页内容</p>
</div>
<div class="page">
<p>第二页内容</p>
</div>
</div>
</body>
</html><script>
var pages = document.querySelectorAll('.page');
var currentPage = 0;
function nextPage() {
if (currentPage< pages.length - 1) {
pages[currentPage].style.transform = 'rotateY(180deg)';
currentPage++;
pages[currentPage].style.transform = 'rotateY(0deg)';
}
}
function prevPage() {
if (currentPage >0) {
pages[currentPage].style.transform = 'rotateY(-180deg)';
currentPage--;
pages[currentPage].style.transform = 'rotateY(0deg)';
}
}
document.addEventListener('keydown', function(event) {
if (event.keyCode === 37) {
prevPage();
} else if (event.keyCode === 39) {
nextPage();
}
});
</script>