很酷的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. }   

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