使用css3和javascript打造逼真的书籍翻页效果！本文提供完整代码示例，助您轻松实现这一炫酷功能。
改进后的代码：
<code class="html"><!DOCTYPE html>
<html>
<head>
<title>书籍翻页效果</title>
<style>
body {
perspective: 2000px; /* 添加透视效果 */
}
.book {
transform: rotateX(30deg);
position: relative;
left: 40%;
top: 30%;
width: 500px;
height: 500px;
background-color: #fff;
transform-style: preserve-3d; /* 保持3D转换 */
}
.page {
position: absolute;
top: 0;
left: 0;
width: 500px;
height: 500px;
border: 1px solid #1976D2;
text-align: center;
transform-origin: 0 50%;
backface-visibility: hidden; /* 隐藏背面 */
transition: transform 0.5s ease; /* 添加过渡效果 */
}
.front1 {
background-color: paleturquoise;
}
.front2 {
background-color: goldenrod;
}
.page img {
width: 100%;
height: 100%;
display: block;
}
</style>
</head>
<body>
<div class="book">
<ul>
<li class="page front1">@@##@@</li>
<li class="page front2">@@##@@</li>
<li class="page front2">@@##@@</li>
<li class="page front2">@@##@@</li>
<li class="page front2">@@##@@</li>
<li class="page" id="Rcover">@@##@@</li> </ul>
</div>
<script>
var book = document.querySelector(".book");
var pages = document.querySelectorAll(".page");
var currentPage = 0;
var totalPages = pages.length -1;
book.addEventListener("click", function(event) {
if (currentPage < totalPages) {
currentPage++;
pages[currentPage].style.transform = "rotateY(-180deg)"; // 更平滑的翻页动画
}
});
document.getElementById("Rcover").addEventListener("click", function() {
currentPage = 0;
pages.forEach(page => {
page.style.transform = "rotateY(0deg)";
});
});
</script>
</body>
</html></code>
代码改进说明：
-
添加
transform-style: preserve-3d;: 确保3D转换效果正确应用于.book元素。 -
添加
backface-visibility: hidden;: 隐藏页面背面，避免翻页时出现不必要的视觉效果。 -
添加
transition: transform 0.5s ease;: 为页面翻转添加平滑的过渡动画。 -
改进JavaScript逻辑: 使用
currentPage变量跟踪当前页码，并使用更简洁的代码实现翻页和重置功能。 翻页动画也更平滑。 -
更清晰的HTML结构: 使用
<ul></ul>和<li>元素更好地组织页面结构。
此改进后的代码更加高效、易于理解和维护，并提供更流畅的翻页体验。 记得替换 "img/44.jpg" 和 "img/22.jpg" 为您实际图片的路径。 此代码假设您已经有了这些图片文件。
立即学习“Java免费学习笔记（深入）”；
