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

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

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

在线演示地址如下：

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

实现的代码：

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

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