很酷的HTML5電子書翻頁動畫特效_html5教學技巧

本文分享一款很酷的HTML5電子書翻頁動畫特效，這款HTML5翻頁動畫可以用滑鼠拖曳頁面來模擬手動翻頁的效果，也可以點擊書頁的邊框來快速翻頁。之前也分享過一款HTML5 3D書本翻頁特效，3D視覺效果更加強烈。

線上示範網址如下：

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

實現的程式碼：

XML/HTML Code複製內容到剪貼簿

1. div id=id=id=>
2.          div p p
>
3.              畫布 畫布 畫布 畫布 
畫佈"
4. >畫布>             畫布 畫布 
畫布
5.  畫布 畫布中間畫布">畫布>  
6.           部分 部分 部分 >                 divdivdiv src="images/0.jpg" 寬度
7. = 寬度= "475" 身高="482"   div>                 跨度 8px ;">
img
8.  src=src=
images/zh.png"
9.  高度="482"  🎜>跨度>             部分
>             部分 部分 部分  樣式="背景:url(images/left_pk.jpg)">>
10.               divdivdiv src="images/1.jpg" 寬度= 寬度= 「466」 身高=「463」="float:right;margin-top:9px;" /> /> div>
11.              部分>
12.              部分 部分 部分 
13. >                 divdivdiv src="images/2.jpg" 寬度= 寬度= 「466」 身高=「463」="float:left;margin-top:9px;" /> />
14. div>             
15. 部分>             部分 部分
16.  部分 >                 divdivdiv src="images/3.jpg" 寬度= 寬度= 「466」 身高=「463」="float:right;margin-top:9px;" 
17. /> /> div>
18.              部分>             部分 部分 部分 >  
19.               divdivdiv src="images/4.jpg" 寬度= 寬度= 「466」 身高=「463」="float:left;margin-top:9px;" /> /> div>
20.              部分>
21.              部分 部分 部分 
22. >                 divdivdiv src="images/5.jpg" 寬度= 寬度= 「466」 身高=「463」="float:right;margin-top:9px;" /> />
23. div>             
24. 部分>             部分 部分 部分 
 
25. 樣式="背景:url(images/right_pk.jpg)">>>               divdivdiv src="images/6.jpg" 寬度= 寬度= 「466」 身高=「463」=
"float:left;margin-top:9px;"
26.  /> />
div
27. >             部分>  
          部分 部分 部分 >  
28.               divdivdiv src="images/24.jpg" 寬度 寬度= "475" 身高="482"  
 
29. div>                 跨度 8px ;">img src=src= images/zh.png" 高度="482"  🎜>
30. 跨度>             
31. 部分>         
32. div>    
div

>

  

CSS樣式：

CSS 代碼 將內容複製到剪切板

1. 身體, h2, p {   
2.  邊距：0；   
3.  填充：0；   
4. }   
5.   
6. 身體{   
7.  背景: 網址("../🎜>("..//jp/cover ) 不重複
8. ；     -webkit-背景-尺寸
9. ：封面；   尺寸：封面；   ：封面；     -moz-背景
10. -尺寸：封面；       -o-背景-
11. 尺寸：封面；       背景-尺寸
12. ：封面；   顏色: #333;   
13. ;   ;   ;     字體系列
14. : Helvetica, , 
;   
 
16. 文字對齊:居中
;   
17. }   
18. #shinef唇 {     /*背景： url("../images/cover.jpg") 無重複；*/
19.     -o-背景-大小
20. ：100% 100%；  大小：100% 100%；   大小    -webkit-背景-
大小
21. ：100% 100%；   -moz-背景-大小
：100% 100%； >
22.  背景-背景： 100% 100%；  ： 100% 100%；
23.  位置
24. ：絕對
25. ；    }   
26.   
27. #shinef唇頁    
28. {    /*    背景顏色:#fafafa;*/  
29.     背景重複: 重複;  
;  
30.     位置
31. ：絕對
32. ；   絕對
；   
33. ；        z 索引：2；  
34. }      
35. #shinef唇頁section.cover_front，#shinef頁頁。 🎜>  位置
36. ：絕對；     溢出
37. ：隱藏；     顏色: #ffffff;   ;    }  
38.   
39. #shinef唇頁 .cover_front_content   
40. {   
41.  位置：絕對；    
42. ；    ；    ；    
43. ；    ；    ；    ；    
44. ；      z 索引：1；   
45.  溢出:隱藏
46. ;     白色
47. 空白:nowrap;   >;
48.  -ms-user-select:無
49. ;   
50.  -webkit-user-select:無;   
51.  -moz-user-select:無
52. ;    }      
53. #shinef唇頁 .cover_front_back   
54. {   
55.  位置
56. ：絕對；    
；    
57. ；    
58. ；    ；    ；    ；    
59. ；    ；    
60.  z 索引：0；    }   
61.    #shinef唇頁 .cover_background_content   
{   
62.  位置
：
63. 絕對；    ；    
64. ；    ；    
；    
65. ；    
66. ；    
67. ；    ；    
68.  z 索引
69. ：1；     溢出:隱藏
70. ;     白色
71. 空白:
72. nowrap;   >;
73.  -ms-user-select:無;   
74.  -webkit-user-select:無
75. ;     -moz-user-select:無;   
76. }       #shinef
77. 唇頁 .cover_background_back    {     位置
78. ：絕對；    ；    ；    ；    ；    ；    ；    ；    ；      z 索引：0；    }       #shinef唇頁 section.pageflip     {     顯示: 阻止;     位置：絕對；     溢出：隱藏；    }  
79.   
80. #shinef唇頁部分。 頁 {   
81.     //背景顏色: #fafafa;  >#fafafa
82. ;    顯示: 阻止;   
83.  位置：絕對
；   
84.  溢出：隱藏
；   
}   
86.  #shineflip-pages-flipcontent,#shinef
lip-pages 
87.   顯示: 阻止;   
88. ;      字體大小: 
89. 12px;   12px;      
90. 位置：絕對；  
  
91. 溢出：隱藏
；  
92.   寬度
93. ：100%；   
94.   高度：100%；     }   
95.  #shineflip-pages-flipcontent，#shineflip-pages s>
  
96. 顯示: 阻止;   ;   
97.   字體大小: 12px
;   
98. 12px;   ;   位置
：
99. 絕對
；  
100.   溢出
101. ：隱藏；  
102. ；    }   
103.  #shineflip-pages-flipcontent p，  
104.  #shineflip-pages-flipcontent h2，  
105.  #shinef唇頁部分 p，    
#shinef
106. 唇頁部分 h2 {   
107.   
高
108. ：1.4em；     
文字對齊
109. ：對齊；   ；   
110.  }      
111. #shinef唇畫布 {     位置：絕對；     z 索引：0；    }  
112.   
113. #shineflip-page-mid-canvas {  
-mid-canvas {  
114.  position: absolute
115. ;   ;    pointer-events: 
116. none;   none;   
117. ;   

 

z-index

: 0;   

}    以上就是本文的全部內容，希望大家喜歡。