如何制作HTML5电子书翻页动画特效
更新:HHH   时间:2023-1-7


如何制作HTML5电子书翻页动画特效,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

这款HTML5翻页动画可以用鼠标拖动页面来模拟手动翻页的效果,也可以点击书页的边框来快速翻页。

在线演示地址如下:

http://demo.jb51.net/js/2016/html5-book-page/

实现的代码:

XML/HTML Code复制内容到剪贴板

  1. <div id="shineflip">  
          <div id="shineflip-pages">  
              <canvas id="shineflip-canvas"></canvas>  
              <canvas id="shineflip-page-mid-canvas"></canvas>  
              <section class="page">  
                  <div><img src="images/0.jpg" width="475" height="482" /></div>  
                  <span style="left:18px;"><img src="images/zh.png" height="482" /></span>  
              </section>  
              <section class="page" style="background:url(images/left_pk.jpg)">  
                  <div><img src="images/1.jpg" width="466" height="463" style="float:right;margin-top:9px;" /></div>  
              </section>  
              <section class="page">  
                  <div><img src="images/2.jpg" width="466" height="463" style="float:left;margin-top:9px;" /></div>  
              </section>  
              <section class="page">  
                  <div><img src="images/3.jpg" width="466" height="463" style="float:right;margin-top:9px;" /></div>  
              </section>  
              <section class="page">  
                  <div><img src="images/4.jpg" width="466" height="463" style="float:left;margin-top:9px;" /></div>  
              </section>  
              <section class="page">  
                  <div><img src="images/5.jpg" width="466" height="463" style="float:right;margin-top:9px;" /></div>  
              </section>  
              <section class="page" style="background:url(images/right_pk.jpg)">  
                  <div><img src="images/6.jpg" width="466" height="463" style="float:left;margin-top:9px;" /></div>  
              </section>  
              <section class="page">  
                  <div><img src="images/24.jpg" width="475" height="482" /></div>  
                  <span style="right:18px;"><img src="images/zh.png" height="482" /></span>  
              </section>  
          </div>  
      </div>  
    CSS样式:
    CSS Code复制内容到剪贴板
    body, h3, p {   
     margin: 0;   
     padding: 0;   
    }   
      
    body {   
     background: url("../images/cover.jpg") no-repeat;   
     -webkit-background-size: cover;   
        -moz-background-size: cover;   
        -o-background-size: cover;   
        background-size: cover;   
     color: #333;   
     font-family: Helvetica, sans-serif;   
     text-align:center;   
    }   
    #shineflip {   
     /*background: url("../images/cover.jpg") no-repeat;*/  
     -o-background-size: 100% 100%;    
     -webkit-background-size: 100% 100%;   
     -moz-background-size: 100% 100%;   
     background-size: 100% 100%;   
     position: absolute;   
    }   
      
    #shineflip-pages    
    {   
    /*    background-color:#fafafa;*/  
        background-repeat: repeat;   
        position: absolute;   
        z-index: 2;   
    }   
      
    #shineflip-pages section.cover_front, #shineflip-pages section.cover_background{   
     position: absolute;   
     overflow: hidden;   
     color: #ffffff;   
    }   
      
    #shineflip-pages .cover_front_content   
    {   
     position: absolute;    
     z-index: 1;   
     overflow:hidden;   
     whitewhite-space:nowrap;   
     -ms-user-select:none;   
     -webkit-user-select:none;   
     -moz-user-select:none;   
    }   
      
    #shineflip-pages .cover_front_back   
    {   
     position: absolute;    
     z-index: 0;   
    }   
      
    #shineflip-pages .cover_background_content   
    {   
     position: absolute;    
     z-index: 1;   
     overflow:hidden;   
     whitewhite-space:nowrap;   
     -ms-user-select:none;   
     -webkit-user-select:none;   
     -moz-user-select:none;   
    }   
      
    #shineflip-pages .cover_background_back   
    {   
     position: absolute;    
     z-index: 0;   
    }   
      
    #shineflip-pages section.pageflip    
    {   
     display: block;   
     position: absolute;   
     overflow: hidden;   
    }   
      
    #shineflip-pages section.page {   
        //background-color: #fafafa;   
     display: block;   
     position: absolute;   
     overflow: hidden;   
    }   
     #shineflip-pages-flipcontent,#shineflip-pages section>div {   
      display: block;   
      font-size: 12px;   
      position: absolute;   
      overflow: hidden;   
      width:100%;   
      height:100%;   
     }   
     #shineflip-pages-flipcontent,#shineflip-pages section>span {   
      display: block;   
      font-size: 12px;   
      position: absolute;   
      overflow: hidden;   
     }   
     #shineflip-pages-flipcontent p,   
     #shineflip-pages-flipcontent h3,   
     #shineflip-pages section p,   
     #shineflip-pages section h3 {   
      line-height: 1.4em;   
      text-align: justify;   
     }   
      
    #shineflip-canvas {   
     position: absolute;   
     z-index: 0;   
    }   
      
    #shineflip-page-mid-canvas {   
     position: absolute;   
     pointer-events: none;   
     z-index: 0;   
    }

关于如何制作HTML5电子书翻页动画特效问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注天达云行业资讯频道了解更多相关知识。

返回web开发教程...