第五场【脱马甲】小集-【13周年庆。长相思】-北京诗人

【周】樊彰 发表于 2023-10-15 09:41

第五场【脱马甲】小集

本帖最后由【周】樊彰于 2023-10-15 09:43 编辑 <br /><br /><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/652940f4c458853aef05a658.jpg" alt="" /></div>
            <div><img src="https://pic.imgdb.cn/item/652a09abc458853aef084d5e.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 09:42

别喝了，字呢？

【年】潇潇 发表于 2023-10-15 09:43

看头像很熟悉

【周】樊彰 发表于 2023-10-15 09:44

小月宛初发表于 2023-10-15 09:42
别喝了，字呢？

在上面啊。。。{:9_339:}

【周】德岩 发表于 2023-10-15 09:44

嗯！大制作！已经装裱成册了，厉害

【周】湖禾族长 发表于 2023-10-15 09:44

无不为大师的精湛艺术所陶醉{:9_343:}{:9_312:}{:9_346:}

【周】樊彰 发表于 2023-10-15 09:44

【年】潇潇发表于 2023-10-15 09:43
看头像很熟悉

和咱熟？{:9_333:}

【周】樊彰 发表于 2023-10-15 09:45

【周】德岩发表于 2023-10-15 09:44
嗯！大制作！已经装裱成册了，厉害

嘿嘿，瞎玩。。。{:9_339:}

【周】沈倦 发表于 2023-10-15 09:45

小月宛初发表于 2023-10-15 09:42
别喝了，字呢？

点击图片自动打开了。{:9_320:}

【周】樊彰 发表于 2023-10-15 09:46

【周】湖禾族长发表于 2023-10-15 09:44
无不为大师的精湛艺术所陶醉

族长你太客气了，不至于。。。{:9_320:}

【周】沈倦 发表于 2023-10-15 09:46

这场也写了不少，都是好字，感谢支持哦。{:9_320:}{:9_305:}

【周】沈倦 发表于 2023-10-15 09:47

再听这曲儿又是一番风味。{:9_343:}

【周】樊彰 发表于 2023-10-15 09:47

【周】沈倦发表于 2023-10-15 09:45
点击图片自动打开了。

还是你懂。。。{:9_313:}

【周】沈倦 发表于 2023-10-15 09:49

【周】樊彰发表于 2023-10-15 09:47
还是你懂。。。

噗，我是谁呀，我不懂谁懂。{:4_123:}

【周】樊彰 发表于 2023-10-15 09:56

岁月荏苒，时光似水，美好的日子总是很短暂。转眼间，轰轰烈烈的北诗13年庆典舞会就要徐徐落下帷幕了。这次舞会，阵容豪华，可以说才子如云，才女如雨。或婉约，或豪放，或清纯，或灵动，百花齐放，各展风姿。一座倾城，一盏花灯一场烟火。
由于些许俗事，这次和各位大贤交流的不多。只和俺的两个弟弟，沈倦和楚蛮交流了一些。可是俺这俩弟弟也不咋争气啊，平时可能耐了，玉树临风，风流倜傥，才华横溢的。可是在这场中，一个都没牵手成功。俩弟弟啊，一个弟媳都没领回来，悲哀！悲哀啊悲哀。俺都替你们俩愁。。{:9_320:}

【周】樊彰 发表于 2023-10-15 09:57

【周】沈倦发表于 2023-10-15 09:49
噗，我是谁呀，我不懂谁懂。

{:9_343:}

【周】樊彰 发表于 2023-10-15 09:58

【周】沈倦发表于 2023-10-15 09:46
这场也写了不少，都是好字，感谢支持哦。

这叫不少？{:9_333:}

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

一枚小字，痴念了谁。一绢清泪，心疼了谁。淡然随心。似水无痕。今日一别，孤蓬万里，就让这繁华三千成为过往，就让这一番往事成为回味。露个脸，画一个句号。{:9_339:}

【年】胡珍 发表于 2023-10-15 10:04

这制作没谁了，前来问候，就此别过~

【周】串子 发表于 2023-10-15 11:28

独特的制作，问好诗友。

页: [1] 2 3

北京诗人's Archiver

第五场【脱马甲】小集