东篱闲人 发表于 2023-10-15 20:08

东篱小集

<style>
.book {
      left: -200px;
      display: flex;
      align-items: center;
      width: 1000px;
      height: 900px;
      perspective: 1000px;
      cursor: pointer;
      padding: 10px;
      position: relative;
      background: rgba(0,0,0,.0);
}
.page {
      background: #FFFFFF;
      padding: 0px;
      width: 628px;
      height: 800px;
      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://pic.imgdb.cn/item/652bc52cc458853aefd1eb30.jpg" alt="" /></div>
                <div><img src="https://pic.imgdb.cn/item/652bc546c458853aefd22ac8.jpg" alt="" /></div>
      </div>
      <div class="page">
                <div><img src="https://pic.imgdb.cn/item/6529ee1dc458853aefaf7d7d.jpg" alt="" /></div>
                <div><img src="https://pic.imgdb.cn/item/652aa766c458853aef554140.jpg" alt="" /></div>
      </div>
      <div class="page">
                <div><img src="https://pic.imgdb.cn/item/6529f0f8c458853aefb6cb63.jpg" alt="" /></div>
                <div><img src="https://pic.imgdb.cn/item/6529f215c458853aefba04ed.jpg" alt="" /></div>
      </div>
      <div class="page">
                <div><img src="https://pic.imgdb.cn/item/6529f324c458853aefbd1d2c.jpg" alt="" /></div>
                <div><img src="https://pic.imgdb.cn/item/6529f3fdc458853aefbfd95e.jpg" alt="" /></div>
      </div>

      <div class="page">
               <div><img src="https://pic.imgdb.cn/item/6529f4ddc458853aefc2682d.jpg" alt="" /></div>
                <div><img src="https://pic.imgdb.cn/item/6529fedfc458853aefe25c24.jpg" alt="" /></div>
      </div>
<div class="page">
                <div><img src="https://pic.imgdb.cn/item/6529fff7c458853aefe5fb10.jpg" alt="" /></div>
                <div><img src="https://pic.imgdb.cn/item/652a00fec458853aefe9186e.jpg" alt="" /></div>
      </div>
      <div class="page">
                <div><img src="https://pic.imgdb.cn/item/652a0195c458853aefeb05a4.jpg" alt="" /></div>
                <div><img src="https://pic.imgdb.cn/item/652a041bc458853aeff410f0.jpg" alt="" /></div>
      </div>
      

<div class="page">
               <div><img src="https://pic.imgdb.cn/item/652a0aa6c458853aef0c061e.jpg" alt="" /></div>
                <div><img src="https://pic.imgdb.cn/item/652a04eec458853aeff6ef51.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>

梦油 发表于 2023-10-15 20:44

东篱闲人朋友真是多才多艺啊！{:5_116:}

东篱闲人 发表于 2023-10-15 20:47

梦油 发表于 2023-10-15 20:44
东篱闲人朋友真是多才多艺啊！

不敢不敢，对付着瞎玩。。{:4_176:}

红影 发表于 2023-10-15 21:05

北诗庆典新写的啊，这么多。东篱大哥一定是舞会上最靓的仔{:4_173:}

红影 发表于 2023-10-15 21:07

词好，制作更好，无论是封面封底制作，还是页内图图的配备都很雅致。欣赏东篱大哥好帖{:4_199:}

梦油 发表于 2023-10-15 21:07

东篱闲人 发表于 2023-10-15 20:47
不敢不敢，对付着瞎玩。。

你真是一位谦谦君子。{:5_116:}

东篱闲人 发表于 2023-10-15 21:29

红影 发表于 2023-10-15 21:05
北诗庆典新写的啊，这么多。东篱大哥一定是舞会上最靓的仔

没有，默默无闻的。

东篱闲人 发表于 2023-10-15 21:29

红影 发表于 2023-10-15 21:07
词好，制作更好，无论是封面封底制作，还是页内图图的配备都很雅致。欣赏东篱大哥好帖

多谢多谢，喝水。。{:4_180:}

东篱闲人 发表于 2023-10-15 21:30

梦油 发表于 2023-10-15 21:07
你真是一位谦谦君子。

惭愧惭愧。。。{:5_109:}

红影 发表于 2023-10-15 21:49

东篱闲人 发表于 2023-10-15 21:29
没有，默默无闻的。

谦虚，写着多又这么好，想藏着都藏不住啊{:4_173:}

红影 发表于 2023-10-15 21:50

东篱闲人 发表于 2023-10-15 21:29
多谢多谢，喝水。。

这个制作真的很漂亮，用音画来发表诗词做品，让古韵版更缤纷了呢{:4_173:}

东篱闲人 发表于 2023-10-16 10:08

红影 发表于 2023-10-15 21:50
这个制作真的很漂亮，用音画来发表诗词做品，让古韵版更缤纷了呢

节约空间。。。{:5_117:}

梦油 发表于 2023-10-16 10:37

东篱闲人 发表于 2023-10-15 21:30
惭愧惭愧。。。

令人敬佩啊！

红影 发表于 2023-10-16 12:37

东篱闲人 发表于 2023-10-16 10:08
节约空间。。。

也便于珍藏保存{:4_204:}

偶然~ 发表于 2023-10-16 14:34

欣赏东篱小集的好词，╰谢谢你带来的精彩～！

东篱闲人 发表于 2023-10-16 17:48

偶然~ 发表于 2023-10-16 14:34
欣赏东篱小集的好词，╰谢谢你带来的精彩～！

谢谢偶然，喝茶喝茶。。。{:4_180:}

小辣椒 发表于 2023-10-16 18:19

老头这个是啥时候做的，诗词这么多首，高手啊{:4_178:}

小辣椒 发表于 2023-10-16 18:20

重新制作翻页书，非常的漂亮{:4_199:}

小辣椒 发表于 2023-10-16 18:21

小辣椒也是很喜欢翻页书的效果，实在没有时间玩，以后一定重新做一次{:4_189:}

东篱闲人 发表于 2023-10-16 20:27

小辣椒 发表于 2023-10-16 18:19
老头这个是啥时候做的，诗词这么多首，高手啊

刚做的。。。。{:5_117:}
页: [1] 2
查看完整版本: 东篱小集