学习手动翻书
本帖最后由 醉美水芙蓉 于 2022-5-15 14:24 编辑 <br /><br /><div class="t_fsz"><table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1559396">
<style>
.book {
left: 50px;
display: flex;
align-items: center;
width: 450px;
height: 675px;
perspective: 1000px;
cursor: pointer;
padding: 10px;
position: relative;
background: rgba(0,0,0,.0);
}
.page {
background: #FFFFFF;
padding: 0px;
width: 450px;
height: 675px;
left: 50%;
border-left: 1px solid #DCDCDC;
transform-origin: left;
box-shadow: inset 0px 0px 2px rgba(0,0,0,.5), 1px 1px 12px rgba(255,255,255,.8);
transform-style: preserve-3d;
position: absolute;
}
.page div:nth-child(1) {}
.page div:nth-child(2) { display: none; }
@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><img src="http://pan.yinhuabbs.cn/view.php/9b9b1a79e8dea6c098cc8495a52d165f.jpg" alt="" /></div>
<div><img src=" http://pan.yinhuabbs.cn/view.php/795f820307af895bcea15578e9704d96.jpg" alt="" /></div>
</div>
<div class="page">
<div><img src="http://pan.yinhuabbs.cn/view.php/f7f98f31cdc967168d4b2c39e07b0271.jpg " alt="" /></div>
<div><img src="http://pan.yinhuabbs.cn/view.php/5fc87b580511fc39f857047b7e718556.jpg " alt="" /></div>
</div>
<div class="page">
<div><img src= " http://pan.yinhuabbs.cn/view.php/0b584e04422184c4ad88f4509f7f3923.jpg" alt="" /></div>
<div><img src="http://pan.yinhuabbs.cn/view.php/fd128704d01aa0cb10142e83fcd9afd0.jpg" alt="" /></div>
</div>
<div class="page">
<div><img src="http://pan.yinhuabbs.cn/view.php/9b9b1a79e8dea6c098cc8495a52d165f.jpg " alt="" /></div>
<div><img src="http://pan.yinhuabbs.cn/view.php/795f820307af895bcea15578e9704d96.jpg" alt="" /></div>
</div>
<div class="page">
<div><img src="http://pan.yinhuabbs.cn/view.php/f7f98f31cdc967168d4b2c39e07b0271.jpg" alt="" /></div>
<div><img src="http://pan.yinhuabbs.cn/view.php/5fc87b580511fc39f857047b7e718556.jpg" alt="" /></div>
</div>
<div class="page">
<div><img src="http://pan.yinhuabbs.cn/view.php/0b584e04422184c4ad88f4509f7f3923.jpg" alt="" /></div>
<div><img src="http://pan.yinhuabbs.cn/view.php/fd128704d01aa0cb10142e83fcd9afd0.jpg " alt="" /></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.style.animation = "rot1 .5s linear forwards";
page.children.style.display = "none";
page.children.style.display = "block";
page.children.style.transform = "rotateY(-180deg)";
currentPage ++;
if(currentPage == all){
idx = 1;
currentPage = all - 1;
}
} else { //后翻
page.style.animation = "rot2 .5s linear forwards";
page.children.style.display = "none";
page.children.style.display = "block";
page.children.style.transform = "rotateY(0deg)";
currentPage --;
if(currentPage < 0){
idx = 0;
currentPage = 0;
}
}
setzIdx();
}
function setzIdx(){
for(j=currentPage; j<all; j++){
page.style.zIndex = all - j;
}
for(j=0; j<currentPage;j++) {
page.style.zIndex = j + 1;
}
if(currentPage == all - 1) page.style.zIndex = all;
}
</script>
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=1 height=1 src="https://www.joy127.com/url/3889.mp3"&auto=1&height=66"></iframe><br><br><br>
</td></tr></table>
水芙蓉制作得挺好的。全部是大美女！{:4_199:} 不错哦，最好要做封面和封底，这样才有书的翻页效果 小辣椒 发表于 2022-5-15 16:30
不错哦，最好要做封面和封底，这样才有书的翻页效果
是的！我看见东篱老师的真是不错呢！ 加林森 发表于 2022-5-15 15:27
水芙蓉制作得挺好的。全部是大美女！
谢谢队长鼓励！ 醉美水芙蓉 发表于 2022-5-15 16:41
谢谢队长鼓励！
以后多制作点出来玩。{:4_204:} 漂亮的美女系列图。水芙蓉学得真快，也作出自己的翻页书了。祝贺{:4_187:}
页:
[1]