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

本文分享一款很酷的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 {     backgroundurl("../images/cover.jpg"no-repeat;     -webkit-background-size: cover;        -moz-background-size: cover;        -o-background-size: cover;        background-size: cover;     color#333;     font-familyHelveticasans-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%;     positionabsolute;    }       #shineflip-pages     {    /*    background-color:#fafafa;*/       background-repeatrepeat;        positionabsolute;        z-index: 2;    }       #shineflip-pages section.cover_front, #shineflip-pages section.cover_background{     positionabsolute;     overflowhidden;     color#ffffff;    }       #shineflip-pages .cover_front_content    {     positionabsolute;      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    {     positionabsolute;      z-index: 0;    }       #shineflip-pages .cover_background_content    {     positionabsolute;      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    {     positionabsolute;      z-index: 0;    }       #shineflip-pages section.pageflip     {     displayblock;     positionabsolute;     overflowhidden;    }       #shineflip-pages section.page {        //background-color#fafafa;     displayblock;     positionabsolute;     overflowhidden;    }     #shineflip-pages-flipcontent,#shineflip-pages section>div {      displayblock;      font-size12px;      positionabsolute;      overflowhidden;      width:100%;      height:100%;     }     #shineflip-pages-flipcontent,#shineflip-pages section>span {      displayblock;      font-size12px;      positionabsolute;      overflowhidden;     }     #shineflip-pages-flipcontent p,     #shineflip-pages-flipcontent h2,     #shineflip-pages section p,     #shineflip-pages section h2 {      line-height: 1.4em;      text-alignjustify;     }       #shineflip-canvas {     positionabsolute;     z-index: 0;    }       #shineflip-page-mid-canvas {     positionabsolute;     pointer-events: none;     z-index: 0;    }   

以上就是本文的全部内容,希望大家喜欢。

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