相依为命电视剧,柳沼淳子,激光打印
本文分享一款很酷的html5电子书翻页动画特效,这款html5翻页动画可以用鼠标拖动页面来模拟手动翻页的效果,也可以点击书页的边框来快速翻页。之前也分享过一款html5 3d书本翻页特效,3d视觉效果更加强烈。
在线演示地址如下:
实现的代码:
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样式:
以上就是本文的全部内容,希望大家喜欢。
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!!
点击进行留言回复
相关文章:
-
-
-
-
-
Html5嵌入钉钉的实现示例
这篇文章主要介绍了Html5嵌入钉钉的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学...
[阅读全文]
-
-
-
-
-
-
网友评论