如何制作HTML5电子书翻页动画特效

如何制作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电子书翻页动画特效问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注亿速云行业资讯频道了解更多相关知识。