基于HTML5电子书翻页动画特效

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

在线预览    源码下载

实现的代码。

html代码：

<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/loading.gif' data-original="images/0.jpg" width="475" height="482" /></div>       <span style="left:18px;"><img src='/images/loading.gif' data-original="images/zh.png" height="482" /></span>     </section>     <section class="page" style="background:url(images/left_pk.jpg)">       <div><img src='/images/loading.gif' data-original="images/1.jpg" width="466" height="463" style="float:right;margin-top:9px;" /></div>     </section>     <section class="page">       <div><img src='/images/loading.gif' data-original="images/2.jpg" width="466" height="463" style="float:left;margin-top:9px;" /></div>     </section>     <section class="page">       <div><img src='/images/loading.gif' data-original="images/3.jpg" width="466" height="463" style="float:right;margin-top:9px;" /></div>     </section>     <section class="page">       <div><img src='/images/loading.gif' data-original="images/4.jpg" width="466" height="463" style="float:left;margin-top:9px;" /></div>     </section>     <section class="page">       <div><img src='/images/loading.gif' data-original="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/loading.gif' data-original="images/6.jpg" width="466" height="463" style="float:left;margin-top:9px;" /></div>     </section>     <section class="page">       <div><img src='/images/loading.gif' data-original="images/24.jpg" width="475" height="482" /></div>       <span style="right:18px;"><img src='/images/loading.gif' data-original="images/zh.png" height="482" /></span>     </section>   </div> </div>

原标题：基于HTML5电子书翻页动画特效

关键词：HTML