东篱词选
<style>.book {
left: -180px;
display: flex;
align-items: center;
width: 1000px;
height: 500px;
perspective: 1000px;
cursor: pointer;
padding: 10px;
position: relative;
background: rgba(0,0,0,.0);
}
.page {
background: #FFFFFF;
padding: 0px;
width: 392px;
height: 577px;
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/30/OpYSde.jpg" alt="" /></div>
<div><img src="https://s1.ax1x.com/2022/04/30/OpYEsf.jpg" alt="" /></div>
</div>
<div class="page">
<div><img src="https://s1.ax1x.com/2022/04/30/OpYmdg.jpg" alt="" /></div>
<div><img src="https://s1.ax1x.com/2022/04/30/OpYNo4.jpg" alt="" /></div>
</div>
<div class="page">
<div><img src="https://s1.ax1x.com/2022/04/30/OpYI6P.jpg" alt="" /></div>
<div><img src="https://s1.ax1x.com/2022/04/30/OpY7m8.jpg" alt="" /></div>
</div>
<div class="page">
<div><img src="https://s1.ax1x.com/2022/04/30/OpYLkQ.jpg" alt="" /></div>
<div><img src="https://s1.ax1x.com/2022/04/30/OpYXfs.jpg" alt="" /></div>
</div>
<div class="page">
<div><img src="https://s1.ax1x.com/2022/04/30/OpYz60.jpg" alt="" /></div>
<div><img src="https://s1.ax1x.com/2022/04/30/Opt9mT.jpg" alt="" /></div>
</div>
<div class="page">
<div><img src="https://s1.ax1x.com/2022/04/30/Opt0Ag.jpg" alt="" /></div>
<div><img src="https://s1.ax1x.com/2022/04/30/Opts9s.jpg" alt="" /></div>
</div>
<div class="page">
<div><img src="https://s1.ax1x.com/2022/04/30/OptT3R.jpg" alt="" /></div>
<div><img src="https://s1.ax1x.com/2022/04/30/OpNn8s.jpg" alt="" /></div>
</div>
<div class="page">
<div><img src="https://s1.ax1x.com/2022/04/30/OpN1bT.jpg" alt="" /></div>
<div><img src="https://s1.ax1x.com/2022/04/30/OpNtPJ.jpg" alt="" /></div>
</div>
<div class="page">
<div><img src="https://s1.ax1x.com/2022/04/30/OpNhsP.jpg" alt="" /></div>
<div><img src="https://s1.ax1x.com/2022/04/30/OpN4qf.jpg" alt="" /></div>
</div>
<div class="page">
<div><img src="https://s1.ax1x.com/2022/04/30/OpNodS.jpg" alt="" /></div>
<div><img src="https://s1.ax1x.com/2022/04/30/OpNTIg.jpg" alt="" /></div>
</div>
<div class="page">
<div><img src="https://s1.ax1x.com/2022/04/30/OpUSdU.jpg" alt="" /></div>
<div><img src="https://s1.ax1x.com/2022/04/30/OpUiW9.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=5241799&auto=1&height=66"></iframe><br><br><br>
一页插画一页词句，真雅致。东篱大哥给自己做了一本电子书籍呢。可以好好留作纪念了{:4_199:} 封面和封底也做得很美，非常精致的作品{:4_187:} 我就不越权了，等着队长来加精吧{:4_173:} 老兄制作真好，漂亮极了。自己写的诗真美！佩服佩服！{:4_199:} 东篱才子！诗词深邃，有力度！赞！
帖子制作精美，体现出深厚的美学功底与审美能力！佩服！ 老头制作真美 {:4_187:}沉醉心迷的文字和图片浑融蕴藉，深微隐幽，意味渊永，美到极处。
真棒！节日快乐！
{:4_204:}{:4_199:}{:4_179:} 红影 发表于 2022-4-30 23:00
一页插画一页词句，真雅致。东篱大哥给自己做了一本电子书籍呢。可以好好留作纪念了
没啥留念的，就是一个练习本。。。{:4_189:} 红影 发表于 2022-4-30 23:01
我就不越权了，等着队长来加精吧
加一个，玩呗。。。{:5_117:} 加林森 发表于 2022-4-30 23:24
老兄制作真好，漂亮极了。自己写的诗真美！佩服佩服！
瞎鼓捣，不然干啥去？{:5_117:} 马黑黑 发表于 2022-5-1 07:39
东篱才子！诗词深邃，有力度！赞！
帖子制作精美，体现出深厚的美学功底与审美能力！佩服！
你这个说的有点严重了哈。。。{:5_117:} 大猫咪 发表于 2022-5-1 10:33
老头制作真美 沉醉心迷的文字和图片浑融蕴藉，深微隐幽，意味渊永，美到极处。
真棒！节日 ...
问好猫猫，节日快乐！你在彩云之南还好吗？{:5_106:} 东篱闲人 发表于 2022-5-1 15:02
你这个说的有点严重了哈。。。
(=@__@=)哪里？(=@__@=)哪里？恰如其分。俺可不是吹的 马黑黑 发表于 2022-5-1 15:22
(=@__@=)哪里？(=@__@=)哪里？恰如其分。俺可不是吹的
确实不是吹，是忽悠。。。{:4_170:} 东篱闲人 发表于 2022-5-1 15:30
确实不是吹，是忽悠。。。
凡伟大的东东，开始时都需要忽悠，音忽悠而成为事实 马黑黑 发表于 2022-5-1 15:38
凡伟大的东东，开始时都需要忽悠，音忽悠而成为事实
地上原本没有路，走的人多了，也便成了路。。。{:5_117:} 东篱闲人 发表于 2022-5-1 15:40
地上原本没有路，走的人多了，也便成了路。。。
就是这个道理，你明白的 马黑黑 发表于 2022-5-1 16:14
就是这个道理，你明白的
俺明白啥呀？都让你忽悠懵了。。。。{:4_172:} 东篱闲人 发表于 2022-5-1 16:28
俺明白啥呀？都让你忽悠懵了。。。。
这是将来你成为伟人必经之路 东篱闲人 发表于 2022-5-1 15:01
瞎鼓捣，不然干啥去？
好的好的，继续玩。。。{:4_189:}