• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营

    • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    很酷的HTML5电子书翻页动画特效

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

    在线演示地址如下：

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

    实现的代码：

    XML/HTML Code复制内容到剪贴板
    1. <div id="shineflip">  
    2.       <div id="shineflip-pages">  
    3.           <canvas id="shineflip-canvas"></canvas>  
    4.           <canvas id="shineflip-page-mid-canvas"></canvas>  
    5.           <section class="page">  
    6.               <div><img src="images/0.jpg" width="475" height="482" /></div>  
    7.               <span style="left:18px;"><img src="images/zh.png" height="482" /></span>  
    8.           </section>  
    9.           <section class="page" style="background:url(images/left_pk.jpg)">  
    10.               <div><img src="images/1.jpg" width="466" height="463" style="float:right;margin-top:9px;" /></div>  
    11.           </section>  
    12.           <section class="page">  
    13.               <div><img src="images/2.jpg" width="466" height="463" style="float:left;margin-top:9px;" /></div>  
    14.           </section>  
    15.           <section class="page">  
    16.               <div><img src="images/3.jpg" width="466" height="463" style="float:right;margin-top:9px;" /></div>  
    17.           </section>  
    18.           <section class="page">  
    19.               <div><img src="images/4.jpg" width="466" height="463" style="float:left;margin-top:9px;" /></div>  
    20.           </section>  
    21.           <section class="page">  
    22.               <div><img src="images/5.jpg" width="466" height="463" style="float:right;margin-top:9px;" /></div>  
    23.           </section>  
    24.           <section class="page" style="background:url(images/right_pk.jpg)">  
    25.               <div><img src="images/6.jpg" width="466" height="463" style="float:left;margin-top:9px;" /></div>  
    26.           </section>  
    27.           <section class="page">  
    28.               <div><img src="images/24.jpg" width="475" height="482" /></div>  
    29.               <span style="right:18px;"><img src="images/zh.png" height="482" /></span>  
    30.           </section>  
    31.       </div>  
    32.   </div>  

    CSS样式：

    CSS Code复制内容到剪贴板
    1. body, h2, p {   
    2.  margin: 0;   
    3.  padding: 0;   
    4. }   
    5.   
    6. body {   
    7.  background: url("../images/cover.jpg") no-repeat;   
    8.  -webkit-background-size: cover;   
    9.     -moz-background-size: cover;   
    10.     -o-background-size: cover;   
    11.     background-size: cover;   
    12.  color: #333;   
    13.  font-family: Helvetica, sans-serif;   
    14.  text-align:center;   
    15. }   
    16. #shineflip {   
    17.  /*background: url("../images/cover.jpg") no-repeat;*/  
    18.  -o-background-size: 100% 100%;    
    19.  -webkit-background-size: 100% 100%;   
    20.  -moz-background-size: 100% 100%;   
    21.  background-size: 100% 100%;   
    22.  position: absolute;   
    23. }   
    24.   
    25. #shineflip-pages    
    26. {   
    27. /*    background-color:#fafafa;*/  
    28.     background-repeat: repeat;   
    29.     position: absolute;   
    30.     z-index: 2;   
    31. }   
    32.   
    33. #shineflip-pages section.cover_front, #shineflip-pages section.cover_background{   
    34.  position: absolute;   
    35.  overflow: hidden;   
    36.  color: #ffffff;   
    37. }   
    38.   
    39. #shineflip-pages .cover_front_content   
    40. {   
    41.  position: absolute;    
    42.  z-index: 1;   
    43.  overflow:hidden;   
    44.  whitewhite-space:nowrap;   
    45.  -ms-user-select:none;   
    46.  -webkit-user-select:none;   
    47.  -moz-user-select:none;   
    48. }   
    49.   
    50. #shineflip-pages .cover_front_back   
    51. {   
    52.  position: absolute;    
    53.  z-index: 0;   
    54. }   
    55.   
    56. #shineflip-pages .cover_background_content   
    57. {   
    58.  position: absolute;    
    59.  z-index: 1;   
    60.  overflow:hidden;   
    61.  whitewhite-space:nowrap;   
    62.  -ms-user-select:none;   
    63.  -webkit-user-select:none;   
    64.  -moz-user-select:none;   
    65. }   
    66.   
    67. #shineflip-pages .cover_background_back   
    68. {   
    69.  position: absolute;    
    70.  z-index: 0;   
    71. }   
    72.   
    73. #shineflip-pages section.pageflip    
    74. {   
    75.  display: block;   
    76.  position: absolute;   
    77.  overflow: hidden;   
    78. }   
    79.   
    80. #shineflip-pages section.page {   
    81.     //background-color: #fafafa;   
    82.  display: block;   
    83.  position: absolute;   
    84.  overflow: hidden;   
    85. }   
    86.  #shineflip-pages-flipcontent,#shineflip-pages section>div {   
    87.   display: block;   
    88.   font-size: 12px;   
    89.   position: absolute;   
    90.   overflow: hidden;   
    91.   width:100%;   
    92.   height:100%;   
    93.  }   
    94.  #shineflip-pages-flipcontent,#shineflip-pages section>span {   
    95.   display: block;   
    96.   font-size: 12px;   
    97.   position: absolute;   
    98.   overflow: hidden;   
    99.  }   
    100.  #shineflip-pages-flipcontent p,   
    101.  #shineflip-pages-flipcontent h2,   
    102.  #shineflip-pages section p,   
    103.  #shineflip-pages section h2 {   
    104.   line-height: 1.4em;   
    105.   text-align: justify;   
    106.  }   
    107.   
    108. #shineflip-canvas {   
    109.  position: absolute;   
    110.  z-index: 0;   
    111. }   
    112.   
    113. #shineflip-page-mid-canvas {   
    114.  position: absolute;   
    115.  pointer-events: none;   
    116.  z-index: 0;   
    117. }   

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

    上一篇：推荐10个HTML5响应式框架
    下一篇：一波HTML5 Canvas基础绘图实例代码集合
  • 相关文章
    • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

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