本文分享一款很酷的HTML5电子书翻页动画特效，这款HTML5翻页动画可以用鼠标拖动页面来模拟手动翻页的效果，也可以点击书页的边框来快速翻页。之前也分享过一款HTML5 3D书本翻页特效，3D视觉效果更加强烈。
在线演示地址如下：
http://demo.jb51.net/js/2016/html5-book-page/
实现的代码：
XML/HTML Code复制内容到剪贴板 <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, 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-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 h2, #shineflip-pages section p, #shineflip-pages section h2 { 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; }以上就是本文的全部内容，希望大家喜欢。
