本文分享一款很酷的HTML5电子书翻页动画特效,这款HTML5翻页动画可以用鼠标拖动页面来模拟手动翻页的效果,也可以点击书页的边框来快速翻页。之前也分享过一款HTML5 3D书本翻页特效,3D视觉效果更加强烈。
![](http://files.jb51.net/file_images/article/201602/2016225155148237.jpg?2016125155158)
在线演示地址如下:
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样式:
以上就是本文的全部内容,希望大家喜欢。