书中自有颜如玉代码

马黑黑 · 发表于 2022-4-28 22:29

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

做的时候发现有些辅助性质的CSS定义与论坛的重合，改了一下才正常。代码发布在此方便大家学习：

<style>
.book {
left: -214px;
display: flex;
align-items: center;
width: 1024px;
height: 700px;
perspective: 3000px;
cursor: pointer;
padding: 10px;
position: relative;
}
.page {
padding: 20px;
width: 478px;
height: 670px;
left: 50%;
background-color: rgba(75,92,92,1);
background: linear-gradient(to right, rgba(75,92,92,1) 0%, rgba(47,79,79,1) 1%, rgba(105,105,105,1) 100%);
box-shadow: inset -10px -3px 6px rgba(1,12,12,1), 1px 1px 20px rgba(0,0,0,.15);
box-shadow: inset -2px 2px 6px rgba(255,255,255,.1), 1px 1px 20px rgba(0,0,0,.15);
transform-origin: left;
transform-style: preserve-3d;
position: absolute;
}
.page div { width: 100%; height: 100%; }
.page div:nth-child(1) { }
.page div:nth-child(2) { display: none; }
.page p { margin: 0; padding: 4px 0; }
.rnum { position: absolute; bottom: 4px; right: 10px; color: #888; font-size: 10px; }
.lnum { position: absolute; bottom: -16px; left: -6px; color: #888; font-size: 10px; }
.tit { writing-mode: vertical-lr; font: bold 3em / 4em sans-serif;color:#e6e6e6;text-shadow: 1px 1px 2px gray; }
@keyframes rot1{
from { transform: rotateY(0deg); }
to { transform: rotateY(-180deg); }
}
@keyframes rot2{
from { transform: rotateY(-180deg); }
to { transform: rotateY(0deg); }
}
</style>
<div class="book">
<div class="page">
<div>
<p class="rnum">All in here</p>
<p style="text-align: right; color: #888; font-size: 12px;">马<br>黑</p>
<p class="tit">書中自有顏如玉</p>
</div>
<div style="background:url('https://638183.freep.cn/638183/t22/h1.jpg') no-repeat center/cover"><p>　开卷有益　看图洗眼</p></div>
</div>
<div class="page">
<div style="background:url('https://638183.freep.cn/638183/t22/h2.jpg') no-repeat center/cover"><p class="rnum">1</p></div>
<div style="background:url('https://638183.freep.cn/638183/t22/h3.jpg') no-repeat center/cover"><p class="lnum">2</p></div>
</div>
<div class="page">
<div style="background:url('https://638183.freep.cn/638183/t22/h4.jpg') no-repeat center/cover"><p class="rnum">3</p></div>
<div style="background:url('https://638183.freep.cn/638183/t22/h5.jpg') no-repeat center/cover"><p class="lnum">4</p></div>
</div>
<div class="page">
<div style="background:url('https://638183.freep.cn/638183/t22/h6.jpg') no-repeat center/cover"><p class="rnum">5</p></div>
<div style="background:url('https://638183.freep.cn/638183/t22/h7.jpg') no-repeat center/cover"><p class="lnum">6</p></div>
</div>
<div class="page">
<div style="background:url('https://638183.freep.cn/638183/t22/h8.jpg') no-repeat center/cover"><p class="rnum">-End-</p></div>
<div><p class="rnum">花潮出版社出版<br>正版價: ￥99.99</p></div>
</div>
</div>
<script>
let page = document.querySelectorAll(".page");
let idx = 0;
let all = page.length;
let currentPage = 0;
setzIdx();
document.querySelector(".book").onclick = function(){
if(idx == 0){ //前翻
page[currentPage].style.animation = "rot1 .5s linear forwards";
page[currentPage].children[0].style.display = "none";
page[currentPage].children[1].style.display = "block";
page[currentPage].children[1].style.transform = "rotateY(-180deg)";
currentPage ++;
if(currentPage == all){
idx = 1;
currentPage = all - 1;
}
} else { //后翻
page[currentPage].style.animation = "rot2 .5s linear forwards";
page[currentPage].children[1].style.display = "none";
page[currentPage].children[0].style.display = "block";
page[currentPage].children[1].style.transform = "rotateY(0deg)";
currentPage --;
if(currentPage < 0){
idx = 0;
currentPage = 0;
}
}
setzIdx();
}
function setzIdx(){
for(j=0; j<all; j++){
page[j].style.zIndex = j >= currentPage ? page[j].style.zIndex = all - j : page[j].style.zIndex = j + 1;
}
if(page[currentPage].style.zIndex <= all) page[currentPage].style.zIndex = all;
}
</script>