东篱小集
<style>.book {
left: 100px;
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> 楼主你真是文采斐然啊 佳作，精品啊，太享受了~！{:9022:}
{:10_403:}{:10_403:}{:10_403:} 等我空了慢慢看，难得闲人来此！欢迎欢迎{:10_402:} 东篱老师好才情啊，诗词那么棒，制作还精美，
都整成了一本杂志，还不用我们手动翻页的，太赞了！ 愤怒の葡萄 发表于 2023-10-23 23:23
楼主你真是文采斐然啊
哪有？都是瞎玩。。。{:9005:}
墨羽 发表于 2023-10-24 21:34
佳作，精品啊，太享受了~！
多谢坛主抬爱。。。{:7_294:}
蜻蜓 发表于 2023-10-24 21:52
等我空了慢慢看，难得闲人来此！欢迎欢迎
问好管理员，好久不见，十分想念。。。。{:7_300:}
瞳萤 发表于 2023-10-24 22:00
东篱老师好才情啊，诗词那么棒，制作还精美，
都整成了一本杂志，还不用我们手动翻页的，太赞了！ ...
都是瞎玩，闲的。。。{:9007:}
东篱闲人 发表于 2023-10-26 09:58
多谢坛主抬爱。。。
您的主题都很养眼很舒服，音画诗词还是配曲都上乘佳作！
{:10_403:}