首页前端开发HTML很酷的HTML5电子书翻页动画特效

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

时间2024-01-24 17:12:28发布访客分类HTML浏览1120
导读：收集整理的这篇文章主要介绍了很酷的HTML5电子书翻页动画特效，觉得挺不错的，现在分享给大家，也给大家做个参考。 本文分享一款很酷的HTML5电子书翻页动画特效，这款HTML5翻页动画可以用鼠标拖动页面来模拟手动翻页的效果，也可以...
收集整理的这篇文章主要介绍了很酷的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. }   

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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！

电子书

若转载请注明出处： 很酷的HTML5电子书翻页动画特效
本文地址： https://pptw.com/jishu/585533.html
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例 HTML5实现动画效果的方式汇总

游客 回复需填写必要信息
↑