加林森 发表于 2022-3-17 16:42

本帖最后由 加林森 于 2022-5-28 21:42 编辑 <br /><br />红影 发表于 2022-3-17 15:58
头尾接近的话，就看不出图片有明显接缝了。
嗯嗯，我这个图片没有选好。


<<style>
.book {/* 容器 */
      left: -214px; margin-top: 150px; display: flex; align-items: center;
      font: normal 1em sans-serif; width: 1024px; height: 600px;
      perspective: 2000px; cursor: pointer; padding: 10px; position: relative;
}
.page {/* 纸张 高度小于父元素30px*/
      padding: 20px;width: 478px; height: 570px; left: 50%; transform-origin: left;
      background: lightseagreen linear-gradient(rgba(255,255,255, .95), rgba(255,255,255, .75));
      box-shadow: inset -3px -3px 6px rgba(255,255,255,.5), 1px 1px 5px 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; }/* 双数页 */
.page div img { width: 100%;} /* img标签：限制宽度 */
@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; }/* 各页p标签 */
.page h2 { font: bold 1.3em sans-serif; padding: 8px 0; margin: 0; }/* 各页h2标题 */
.cover { background: darkgreen linear-gradient(rgba(255,255,255, .65), rgba(255,255,255, .95)); }/* 封面封底纸张样式 */
.rnum { position: absolute; bottom: 6px; right: 12px; color: #000; font-size: 10px; }/*右页码*/
.lnum { position: absolute; bottom: -14px; left: -4px; color: #000; font-size: 10px; }/*左页码*/
.tit { font: bold 3em / 6em sans-serif; color:olive; text-shadow: 1px 1px 2px gray; letter-spacing: 20px; }/* 书名 */
.mid { text-align: center; }/* 居中对齐 */
.right { text-align: right; }/* 右对齐 */
.red { color: red; }/* 红色文本 */
</style>

<div class="book">
      <div class="page cover">
                <div><!-- 封面 -->
                      <p class="rnum">编辑制作：加林森</p>
                     
                     <p><img src="https://pic.imgdb.cn/item/629223330947543129e58c95.jpg" alt="" /></p>
                </div>
                <div><!-- 扉页 -->
                  <p class="lnum">前言</p>
                        <p><img src="https://pic.imgdb.cn/item/629224f60947543129e8b1de.jpg" alt="" /></p>
                </div>
      </div>
      <div class="page">
                <div>
                        <p class="rnum">1</p>
                      <p><br><br>一 .旧欢如梦<br><br><br></p>
               <p><img src="https://pic.imgdb.cn/item/629225df0947543129ea69fd.jpg " alt="" /></p>
                </div>
<div class="page cover">

                <div><!-- 内封 -->
                  
                  <p><img src="https://pic.imgdb.cn/item/629226aa0947543129eb977d.jpg" alt="" /></p>

                </div>
                <div><!-- 封底 -->

<p class="rnum">花潮论坛出版 2022</p>
                     <p><img src="https://wj.zp68.com/lxx/yunhua/2022/05/28/fd.png" alt="" /></p>
                     
                </div>
      </div>
</div>
<audio id="aud" src="https://www.joy127.com/url/90566.mp3" autoplay="autoplay" loop="loop"></audio>

<script>
let book = document.querySelector(".book"), page = document.querySelectorAll(".page"), aud = document.querySelector("#aud");
let idx = 1, all = page.length, currentPage = 0, auto = 5, timer;//auto为自动翻页间隔时间（秒）

setzIdx();
setAuto();

book.onmousemove = () => { clearTimeout(timer); }
book.onmouseout = () => { setAuto(); }
book.onclick = () => { aud.paused ? aud.play() : aud.pause(); }

function turnpage(){
      if(idx == 1) { //左翻
                if(currentPage != all){
                        page.style.animation = "rot1 .5s linear forwards";
                        page.children.style.display = "none";
                        page.children.style.display = "block";
                        page.children.style.transform = "rotateY(-180deg)";
                }
      } else { //右翻
                if(currentPage > 0) {
                        page.style.animation = "rot2 .5s linear forwards";
                        page.children.style.display = "none";
                        page.children.style.display = "block";
                        page.children.style.transform = "rotateY(0deg)";
                }
      }
      currentPage += idx;
      if(currentPage >= all) idx = -1;
      if(currentPage <= 0) idx = 1;
      setzIdx();
}

function setAuto() {
      clearTimeout(timer);
      timer = setTimeout(() => {
                turnpage();
                setAuto();
         }, auto * 1000);
}

function setzIdx(){
      if( currentPage < 0 || currentPage > all -1) return false;
      for(j=0; j<all; j++){
                page.style.zIndex = j >= currentPage ? page.style.zIndex = all - j : page.style.zIndex = j + 1;
      }
      if(currentPage <= all - 1) page.style.zIndex = all;
}
</script>
<br><br><br><br><br><br><br>

红影 发表于 2022-3-17 18:27

加林森 发表于 2022-3-17 16:42
嗯嗯，我这个图片没有选好。

有些图图可以修改一下的。

加林森 发表于 2022-3-17 19:02

红影 发表于 2022-3-17 18:27
有些图图可以修改一下的。

嗯嗯，知道了。谢谢！

樵歌 发表于 2022-3-18 10:59

加林森 发表于 2022-3-16 20:24
都是老黑教的。

小黑自然厉害，你们也不差哈{:4_199:}

加林森 发表于 2022-3-18 12:33

樵歌 发表于 2022-3-18 10:59
小黑自然厉害，你们也不差哈

谢谢鼓励！{:4_176:}
页: 1 [2]
查看完整版本: 《享受这一刻宁静》 - Slim Fey TO：马黑黑