Cool HTML5 e-book page turning animation effects_html5 tutorial skills

This article shares a cool HTML5 e-book page turning animation effect. This HTML5 page turning animation can use the mouse to drag the page to simulate the effect of manual page turning. You can also click on the border of the book page to quickly turn the page. I have also shared an HTML5 3D book page turning effect before, and the 3D visual effect is more intense.

The online demo address is as follows:

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

Implementation code:

XML/HTML CodeCopy content to clipboard

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. }
113. #shineflip-page-mid-canvas {
114. position: absolute;
115. pointer-events: none;
116. z-index: 0;
117. }

The above is the entire content of this article, I hope you all like it.