クールな HTML5 電子書籍のページめくりアニメーション効果_html5 チュートリアルのスキル

この記事では、HTML5 電子書籍のページめくりアニメーション効果を紹介します。この HTML5 ページめくりアニメーションでは、マウスを使用してページをドラッグし、本のページの境界線をクリックすることもできます。素早くページをめくる。以前、HTML5 3D 本のページめくりエフェクトも共有しましたが、3D 視覚効果はより強力です。

オンライン デモのアドレスは次のとおりです:

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

実装コード:

XML/HTML コードコンテンツをクリップボードにコピー

1. <div id="shineflip" >
2. <div id="shineflip-ページ">
3. <canvas id="shineflip-キャンバス">キャンバス>
4. <canvas id="shineflip- page-mid-canvas">canvas>
5. <セクション クラス="ページ" >
6. <div><img src="images/0.jpg" 幅= "475" 身長="482" /> div>
7. <スパン スタイル="左: 18px;"><img src="images/zh.png" 身長="482" />スパン>
8. セクション>
9. <セクション クラス="ページ" スタイル="background:url(images/left_pk.jpg)">
10. <div><img src="images/1.jpg" 幅= "466" 身長="463" スタイル="float:right;margin-top:9px;" /> div>
11. セクション>
12. <セクション クラス="ページ" >
13. <div><img src="images/2.jpg" 幅= "466" 身長="463" スタイル="float:left;margin-top:9px;" /> div>
14. セクション>
15. <セクション クラス="ページ" >
16. <div><img src="images/3.jpg" 幅= "466" 身長="463" スタイル="float:right;margin-top:9px;" /> div>
17. セクション>
18. <セクション クラス="ページ" >
19. <div><img src="images/4.jpg" 幅= "466" 身長="463" スタイル="float:left;margin-top:9px;" /> div>
20. セクション>
21. <セクション クラス="ページ" >
22. <div><img src="images/5.jpg" 幅= "466" 身長="463" スタイル="float:right;margin-top:9px;" /> div>
23. セクション>
24. <セクション クラス="ページ" スタイル="background:url(images/right_pk.jpg)">
25. <div><img src="images/6.jpg" 幅= "466" 身長="463" スタイル="float:left;margin-top:9px;" /> div>
26. セクション>
27. <セクション クラス="ページ" >
28. <div><img src="images/24.jpg" 幅= "475" 身長="482" /> div>
29. <スパン スタイル="右: 18px;"><img src="images/zh.png" 身長="482" />スパン>
30. セクション>
31. div>
32. div>

CSS样式：

CSS コード剪定板への复制コンテンツ

1. body, h2, p {
2. マージン: 0;   
3. パディング: 0;   
4. }
6. ボディ {
7. 背景: url("../images/cover.jpg" ) 繰り返しなし;   
8. -webkit-背景-サイズ: カバー;   
9. -moz-背景-サイズ: カバー;   
10. -o-背景-サイズ: カバー;   
11. 背景-サイズ: カバー;   
12. カラー: #333;   
13. フォントファミリー: Helvetica、サンセリフ;   
14. text-align:center;   
15. }
16. #shinefリップ {
17. /*background: url("../images/cover.jpg") no-repeat;*/
18. -o-背景-サイズ: 100% 100%;    
19. -webkit-背景-サイズ: 100% 100%;   
20. -moz-背景-サイズ: 100% 100%;   
21. 背景-サイズ: 100% 100%;   
22. 位置: 絶対;   
23. }
25. #shinefリップページ
26. {
27. /* background-color:#fafafa;*/
28. background-repeat: repeat;   
29. 位置: 絶対;   
30. z-index: 2;   
31. }
33. #shinefリップページ section.cover_front, #shinefリップページ section.cover_background{
34. 位置: 絶対;   
35. オーバーフロー: 非表示;   
36. カラー: #ffffff;   
37. }  
39. #shinefリップページ .cover_front_content
40. {
41. 位置: 絶対;    
42. z-index: 1;   
43. オーバーフロー:非表示;   
44. 白空白:nowrap;   
45. -ms-user-select:なし;   
46. -webkit-user-select:なし;   
47. -moz-user-select:なし;   
48. }
50. #shinefリップページ .cover_front_back
51. {
52. 位置: 絶対;    
53. z-index: 0;   
54. }
56. #shinefリップページ .cover_background_content
57. {
58. 位置: 絶対;    
59. z-index: 1;   
60. オーバーフロー:非表示;   
61. 白空白:nowrap;   
62. -ms-user-select:なし;   
63. -webkit-user-select:なし;   
64. -moz-user-select:なし;   
65. }
67. #shinefリップページ .cover_background_back
68. {
69. 位置: 絶対;    
70. z-index: 0;   
71. }
73. #shineflip-pages section.pageflip
74. {
75. 表示: ブロック;   
76. 位置: 絶対;   
77. オーバーフロー: 非表示;   
78. }  
80. #shinefリップページセクション。ページ {
81. //背景色: #fafafa;   
82. 表示: ブロック;   
83. 位置: 絶対;   
84. オーバーフロー: 非表示;   
85. }
86. #shineflip-pages-flipcontent,#shineflip-pages section>div {
87. 表示: ブロック;   
88. フォントサイズ: 12px;   
89. 位置: 絶対;   
90. オーバーフロー: 非表示;   
91. 幅:100%;   
92. 身長:100%;   
93. }
94. #shineflip-pages-flipcontent,#shineflip-pages section>span {
95. 表示: ブロック;   
96. フォントサイズ: 12px;   
97. 位置: 絶対;   
98. オーバーフロー: 非表示;   
99. }
100. #shineflip-pages-flipcontent p,
101. #shineflip-pages-flipcontent h2,
102. #shinefリップページ セクション p,
103. #shinefリップページ セクション h2 {
104. 行の高さ: 1.4em;   
105. text-align: justify;   
106. }
108. #shineflip-canvas {
109. 位置: 絶対;   
110. z-index: 0;   
111. }
113. #shineflip-page-mid-canvas {
114. 位置: 絶対;
115. ポインター - イベント: なし;
z-index
116. : 0; }
以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。