很酷的HTML5电子书翻页动画特效

2019-01-28 15:30:17王冬梅

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

在线演示地址如下:

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

实现的代码:

XML/HTML Code复制内容到剪贴板
  1. <div id="shineflip">         <div id="shineflip-pages">  
  2.           <canvas id="shineflip-canvas"></canvas>             <canvas id="shineflip-page-mid-canvas"></canvas>  
  3.           <section class="page">                 <div><img src="images/0.jpg" width="475" height="482" /></div>  
  4.               <span style="left:18px;"><img src="images/zh.png" height="482" /></span>             </section>  
  5.           <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>  
  6.           </section>             <section class="page">  
  7.               <div><img src="images/2.jpg" width="466" height="463" style="float:left;margin-top:9px;" /></div>             </section>  
  8.           <section class="page">                 <div><img src="images/3.jpg" width="466" height="463" style="float:right;margin-top:9px;" /></div>  
  9.           </section>             <section class="page">  
  10.               <div><img src="images/4.jpg" width="466" height="463" style="float:left;margin-top:9px;" /></div>             </section>  
  11.           <section class="page">                 <div><img src="images/5.jpg" width="466" height="463" style="float:right;margin-top:9px;" /></div>  
  12.           </section>             <section class="page" style="background:url(images/right_pk.jpg)">  
  13.               <div><img src="images/6.jpg" width="466" height="463" style="float:left;margin-top:9px;" /></div>             </section>  
  14.           <section class="page">                 <div><img src="images/24.jpg" width="475" height="482" /></div>  
  15.               <span style="right:18px;"><img src="images/zh.png" height="482" /></span>             </section>  
  16.       </div>     </div>