|
|

楼主 |
发表于 2022-5-1 10:35
|
显示全部楼层
代码:
- <style>
- .book { margin: auto; margin-top: 50px; display: flex; align-items: center; font: normal 1em sans-serif; width: 1024px; height: 700px; perspective: 2000px; cursor: pointer; padding: 10px; position: relative; }
- .page { padding: 20px; width: 478px; height: 670px; left: 50%; transform-origin: left; background-color: rgba(243,226,199,1); background: linear-gradient(to right, rgba(193,158,103,1) 0%, rgba(182,141,76,1) 1%, rgba(233,212,179,1) 100%); box-shadow: inset -3px -3px 6px rgba(243,226,199,1), 1px 1px 20px rgba(0,0,0,.15); transform-style: preserve-3d; position: absolute; }
- .page div { width: 100%; height: 100%; }
- .page div:nth-child(1) { display: block; }
- .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); } }
- .page p { margin: 0; padding: 4px 0; }
- h2 { font: bold 1.3em sans-serif; padding: 8px 0; margin: 0; }
- .rnum { position: absolute; bottom: 4px; right: 10px; color: #000; font-size: 10px; }
- .lnum { position: absolute; bottom: -16px; left: -6px; color: #000; font-size: 10px; }
- .tit { font: bold 3em / 10em sans-serif; color:#e6e6e6; text-shadow: 1px 1px 2px gray; }
- .vtc { writing-mode: vertical-rl; text-align: center; }
- .mid { text-align: left; }
- .right { text-align: right; }
- .red { color: red; }
- </style>
- <div class="book">
- <div class="page">
- <div>
- <p class="rnum">All in here</p>
- <p class="vtc">五一榮耀版</p>
- <p class="tit vtc">黑 書</p>
- </div>
- <div>
- <p class="lnum">Never settle</p>
- <p>扉頁</p>
- </div>
- </div>
- <div class="page">
- <div>
- <p class="rnum">1</p>
- <p>第一頁</p>
- </div>
- <div>
- <p class="lnum">2</p>
- <p>第二頁</p>
- </div>
- </div>
- <div class="page">
- <div>
- <p class="rnum">3</p>
- <p>第三頁</p>
- </div>
- <div>
- <p class="lnum">4</p>
- <p>第四頁</p>
- </div>
- </div>
- <div class="page">
- <div>
- <p class="rnum">5</p>
- <p>第五頁</p>
- </div>
- <div>
- <p class="lnum">6</p>
- <p>第六頁</p>
- </div>
- </div>
- <div class="page">
- <div>
- <p>第七頁</p>
- <p class="rnum">7</p>
- </div>
- <div>
- <p>第八頁</p>
- <p class="lnum">8</p>
- </div>
- </div>
- <div class="page">
- <div>
- <p>Hello CSS</p>
- <p class="rnum">内封</p>
- </div>
- <div>
- <p class="rnum">花潮出版社出版<br>五一價 ¥51.00</p>
- </div>
- </div>
- </div>
- <script>
- let book = document.querySelector(".book");
- let page = document.querySelectorAll(".page");
- let idx = 1;
- let all = page.length;
- let currentPage = 0;
- setzIdx();
- book.onclick = function(){
- if(idx == 1) { //左翻
- if(currentPage == all) return false; //封底边界限制
- if(currentPage != all){
- page[currentPage].style.animation = "rot1 .5s linear forwards";
- page[currentPage].children[0].style.display = "none";
- page[currentPage].children[1].style.display = "block";
- page[currentPage].children[1].style.transform = "rotateY(-180deg)";
- }
- } else { //右翻
- if(currentPage == 0) return false; //封面边界限制
- if(currentPage > 0) {
- page[currentPage-1].style.animation = "rot2 .5s linear forwards";
- page[currentPage-1].children[1].style.display = "none";
- page[currentPage-1].children[0].style.display = "block";
- page[currentPage-1].children[1].style.transform = "rotateY(0deg)";
- }
- }
- if(currentPage < 0) currentPage = 0;
- if(currentPage >= all) currentPage = all;
- currentPage += idx;
- setzIdx();
- }
- book.onmousemove = function(e){
- e = e || event;
- let x = e.clientX - this.offsetLeft;
- let y = this.clientWidth;
- this.style.cursor = `url('https://638183.freep.cn/638183/qd/${x > y/2 ? "pre.cur" : "next.cur"}'), auto`;
- idx = x > y/2 ? 1 : -1;
- }
- function setzIdx(){
- if( currentPage < 0 || currentPage > all -1) return false;
- for(j=0; j<all; j++){
- page[j].style.zIndex = j >= currentPage ? page[j].style.zIndex = all - j : page[j].style.zIndex = j + 1;
- }
- if(currentPage <= all - 1) page[currentPage].style.zIndex = all;
- }
- </script>
复制代码
|
|