【书页练习】桃源忆故人
本帖最后由 东篱闲人 于 2022-4-29 17:57 编辑 <br /><br /><style>.book {
left: -180px;
display: flex;
align-items: center;
width: 1000px;
height: 620px;
perspective: 1000px;
cursor: pointer;
padding: 10px;
position: relative;
background: rgba(0,0,0,.0);
}
.page {
background: #FFFFFF;
padding: 0px;
width: 410px;
height: 600px;
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="https://s1.ax1x.com/2022/04/29/LvJP9f.jpg" alt="" /></div>
<div><img src="https://s1.ax1x.com/2022/04/29/LxnY8J.jpg" alt="" /></div>
</div>
<div class="page">
<div><img src="https://s1.ax1x.com/2022/04/29/LvJnNq.jpg" alt="" /></div>
<div><img src="https://s1.ax1x.com/2022/04/29/LvJ1vF.jpg" alt="" /></div>
</div>
<div class="page">
<div><img src="https://s1.ax1x.com/2022/04/29/LvJrKe.jpg" alt="" /></div>
<div><img src="https://s1.ax1x.com/2022/04/29/LvJcVA.jpg" alt="" /></div>
</div>
<div class="page">
<div><img src="https://s1.ax1x.com/2022/04/29/LvJIKg.jpg" alt="" /></div>
<div><img src="https://s1.ax1x.com/2022/04/29/LvJkjg.jpg" alt="" /></div>
</div>
<div class="page">
<div><img src="https://s1.ax1x.com/2022/04/29/LxETwF.jpg" alt="" /></div>
<div><img src="https://s1.ax1x.com/2022/04/29/LvJTbj.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="//music.163.com/outchain/player?type=2&id=1427225683&auto=1&height=66"></iframe><br><br><br> 沙发欣赏{:4_187:} 哇，这个太美了。没想到拙作被东西大哥做成了这么美的帖子。看了一遍又一遍，还有漂亮的封面封底设计，内部的活页线圈也很别致。东篱大哥出品太精美了{:4_199:} 赶紧捧回家珍藏起来，太感谢东篱大哥，这个帖子太棒了{:4_199:} 8张图片我一张张地都保存了，这个真的太美了。再谢东篱大哥{:4_187:} 黑书程序随简陋，高手用着就不一样。的确，配合图片，黑书可以很美！
东篱果然是教授加加 小九 发表于 2022-4-29 14:10
沙发欣赏
茶。。。{:4_180:} 红影 发表于 2022-4-29 14:52
哇，这个太美了。没想到拙作被东西大哥做成了这么美的帖子。看了一遍又一遍，还有漂亮的封面封底设计，内部 ...
俺咋还成东西了？{:4_170:} 红影 发表于 2022-4-29 14:54
赶紧捧回家珍藏起来，太感谢东篱大哥，这个帖子太棒了
不客气，没外人。。。{:5_108:} 红影 发表于 2022-4-29 15:03
8张图片我一张张地都保存了，这个真的太美了。再谢东篱大哥
主要是词好。。。{:5_116:} 马黑黑 发表于 2022-4-29 15:50
黑书程序随简陋，高手用着就不一样。的确，配合图片，黑书可以很美！
东篱果然是教授加加
一定把黑黑的精神落实在行动上。。。。{:5_117:} 马黑黑 发表于 2022-4-29 15:50
黑书程序随简陋，高手用着就不一样。的确，配合图片，黑书可以很美！
东篱果然是教授加加
别瞎说，加加是教授，俺是凡夫俗子。。。。{:5_103:} 东篱闲人 发表于 2022-4-29 17:52
一定把黑黑的精神落实在行动上。。。。
嗯嗯，挺好挺好 东篱闲人 发表于 2022-4-29 17:53
别瞎说，加加是教授，俺是凡夫俗子。。。。
谁都是凡夫俗子，谁都有风光的一面 老兄制作得太漂亮了，佩服佩服。{:4_199:} 马黑黑 发表于 2022-4-29 17:54
谁都是凡夫俗子，谁都有风光的一面
俺没有风光，只有淳朴。。。。{:5_117:} 加林森 发表于 2022-4-29 17:58
老兄制作得太漂亮了，佩服佩服。
瞎鼓捣。。。{:5_117:} 东篱闲人 发表于 2022-4-29 17:59
瞎鼓捣。。。
我还做不来的哦。{:5_102:} 加林森 发表于 2022-4-29 18:13
我还做不来的哦。
那是你不想做，以教授的聪明，没什么东西做不来的。。。{:5_116:} 东篱闲人 发表于 2022-4-29 18:25
那是你不想做，以教授的聪明，没什么东西做不来的。。。
我真的不会，不是客气。。。