快活林资源网 Design By www.csstdc.com
本文分享一款很酷的HTML5电子书翻页动画特效,这款HTML5翻页动画可以用鼠标拖动页面来模拟手动翻页的效果,也可以点击书页的边框来快速翻页。之前也分享过一款HTML5 3D书本翻页特效,3D视觉效果更加强烈。
在线演示地址如下:
http://demo.jb51.net/js/2016/html5-book-page/
实现的代码:
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样式:
CSS Code复制内容到剪贴板- body, h2, p {
- margin: 0;
- padding: 0;
- }
- body {
- background: url("../images/cover.jpg") no-repeat;
- -webkit-background-size: cover;
- -moz-background-size: cover;
- -o-background-size: cover;
- background-size: cover;
- color: #333;
- font-family: Helvetica, sans-serif;
- text-align:center;
- }
- #shineflip {
- /*background: url("../images/cover.jpg") no-repeat;*/
- -o-background-size: 100% 100%;
- -webkit-background-size: 100% 100%;
- -moz-background-size: 100% 100%;
- background-size: 100% 100%;
- position: absolute;
- }
- #shineflip-pages
- {
- /* background-color:#fafafa;*/
- background-repeat: repeat;
- position: absolute;
- z-index: 2;
- }
- #shineflip-pages section.cover_front, #shineflip-pages section.cover_background{
- position: absolute;
- overflow: hidden;
- color: #ffffff;
- }
- #shineflip-pages .cover_front_content
- {
- position: absolute;
- z-index: 1;
- overflow:hidden;
- whitewhite-space:nowrap;
- -ms-user-select:none;
- -webkit-user-select:none;
- -moz-user-select:none;
- }
- #shineflip-pages .cover_front_back
- {
- position: absolute;
- z-index: 0;
- }
- #shineflip-pages .cover_background_content
- {
- position: absolute;
- z-index: 1;
- overflow:hidden;
- whitewhite-space:nowrap;
- -ms-user-select:none;
- -webkit-user-select:none;
- -moz-user-select:none;
- }
- #shineflip-pages .cover_background_back
- {
- position: absolute;
- z-index: 0;
- }
- #shineflip-pages section.pageflip
- {
- display: block;
- position: absolute;
- overflow: hidden;
- }
- #shineflip-pages section.page {
- //background-color: #fafafa;
- display: block;
- position: absolute;
- overflow: hidden;
- }
- #shineflip-pages-flipcontent,#shineflip-pages section>div {
- display: block;
- font-size: 12px;
- position: absolute;
- overflow: hidden;
- width:100%;
- height:100%;
- }
- #shineflip-pages-flipcontent,#shineflip-pages section>span {
- display: block;
- font-size: 12px;
- position: absolute;
- overflow: hidden;
- }
- #shineflip-pages-flipcontent p,
- #shineflip-pages-flipcontent h2,
- #shineflip-pages section p,
- #shineflip-pages section h2 {
- line-height: 1.4em;
- text-align: justify;
- }
- #shineflip-canvas {
- position: absolute;
- z-index: 0;
- }
- #shineflip-page-mid-canvas {
- position: absolute;
- pointer-events: none;
- z-index: 0;
- }
以上就是本文的全部内容,希望大家喜欢。
快活林资源网 Design By www.csstdc.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
快活林资源网 Design By www.csstdc.com
暂无评论...
更新日志
2024年12月23日
2024年12月23日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]