很酷的HTML5电子书翻页动画特效_html5教程技巧

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

在线演示地址如下：

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

实现的代码：

1. <div id="shineflip">
2. <div id="shineflip-pages">
3. <canvas id="shineflip-canvas">canvas>
4. <canvas id="shineflip-page-mid-canvas">canvas>
5. <section class="page">
6. <div><img src="images/0.jpg" width="475" height="482" />div>
7. <span style="left:18px;"><img src="images/zh.png" height="482" />span>
8. section>
9. <section class="page" style="background:url(images/left_pk.jpg)">
10. <div><img src="images/1.jpg" width="466" height="463" style="float:right;margin-top:9px;" />div>
11. section>
12. <section class="page">
13. <div><img src="images/2.jpg" width="466" height="463" style="float:left;margin-top:9px;" />div>
14. section>
15. <section class="page">
16. <div><img src="images/3.jpg" width="466" height="463" style="float:right;margin-top:9px;" />div>
17. section>
18. <section class="page">
19. <div><img src="images/4.jpg" width="466" height="463" style="float