很酷的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. }
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. }
25. #shineflip-pages
26. {
27. /* background-color:#fafafa;*/
28. background-repeat: repeat;
29. position: absolute;
30. z-index: 2;
31. }
33. #shineflip-pages section.cover_front, #shineflip-pages section.cover_background{
34. position: absolute;
35. overflow: hidden;
36. color: #ffffff;
37. }
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. }
50. #shineflip-pages .cover_front_back
51. {
52. position: absolute;
53. z-index: 0;
54. }
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. }
67. #shineflip-pages .cover_background_back
68. {
69. position: absolute;
70. z-index: 0;
71. }
73. #shineflip-pages section.pageflip
74. {
75. display: block;
76. position: absolute;
77. overflow: hidden;
78. }
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. }
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. }

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