简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary

Home  >  Article  >  Web Front-end  >  很酷的HTML5电子书翻页动画特效_html5教程技巧

很酷的HTML5电子书翻页动画特效_html5教程技巧

WBOY
WBOYOriginal
2016-05-16 15:45:482698browse

本文分享一款很酷的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. }   

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

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：浅谈基于HTML5的在线视频播放方案_html5教程技巧Next article：逼真的HTML5树叶飘落动画_html5教程技巧

Related articles

See more