本文分享一款很酷的HTML5电子书翻页动画特效，这款HTML5翻页动画可以用鼠标拖动页面来模拟手动翻页的效果，也可以点击书页的边框来快速翻页。之前也分享过一款HTML5 3D书本翻页特效，3D视觉效果更加强烈。

在线演示地址如下：

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

实现的代码：

XML/HTML Code复制内容到剪贴板 <divid="shineflip"> <divid="shineflip-pages"> <canvasid="shineflip-canvas"></canvas> <canvasid="shineflip-page-mid-canvas"></canvas> <sectionclass="page"> <div><imgsrc="images/0.jpg"width="475"height="482"/></div> <spanstyle="left:18px;"><imgsrc="images/zh.png"height="482"/></span> </section> <sectionclass="page"style="background:url(images/left_pk.jpg)"> <div><imgsrc="images/1.jpg"width="466"height="463"style="float:right;margin-top:9px;"/></div> </section> <sectionclass="page"> <div><imgsrc="images/2.jpg"width="466"height="463"style="float:left;margin-top:9px;"/></div> </section> <sectionclass="page"> <div><imgsrc="images/3.jpg"width="466"height="463"style="float:right;margin-top:9px;"/></div> </section> <sectionclass="page"> <div><imgsrc="images/4.jpg"width="466"height="463"style="float:left;margin-top:9px;"/></div> </section> <sectionclass="page"> <div><imgsrc="images/5.jpg"width="466"height="463"style="float:right;margin-top:9px;"/></div> </section> <sectionclass="page"style="background:url(images/right_pk.jpg)"> <div><imgsrc="images/6.jpg"width="466"height="463"style="float:left;margin-top:9px;"/></div> </section> <sectionclass="page"> <div><imgsrc="images/24.jpg"width="475"height="482"/></div> <spanstyle="right:18px;"><imgsrc="images/zh.png"height="482"/></span> </section> </div> </div>

CSS样式：

CSS Code复制内容到剪贴板 body,h2,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-pagessection.cover_front,#shineflip-pagessection.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-pagessection.pageflip { display:block; position:absolute; overflow:hidden; } #shineflip-pagessection.page{ //background-color:#fafafa; display:block; position:absolute; overflow:hidden; } #shineflip-pages-flipcontent,#shineflip-pagessection>div{ display:block; font-size:12px; position:absolute; overflow:hidden; width:100%; height:100%; } #shineflip-pages-flipcontent,#shineflip-pagessection>span{ display:block; font-size:12px; position:absolute; overflow:hidden; } #shineflip-pages-flipcontentp, #shineflip-pages-flipcontenth2, #shineflip-pagessectionp, #shineflip-pagessectionh2{ 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; }

以上就是本文的全部内容，希望大家喜欢。