Halaman e-buku HTML5 yang menarik kesan animasi effect_html5 kemahiran tutorial

Artikel ini berkongsi kesan animasi mengubah halaman e-buku HTML5 yang hebat ini boleh menggunakan tetikus untuk menyeret halaman untuk mensimulasikan kesan pusingan halaman manual. Anda juga boleh mengklik pada sempadan halaman buku untuk membuka halaman dengan cepat. Saya juga telah berkongsi kesan perubahan halaman buku 3D HTML5 sebelum ini, dan kesan visual 3D adalah lebih sengit.

Alamat demo dalam talian adalah seperti berikut:

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

Kod pelaksanaan:

Kod XML/HTMLSalin kandungan ke papan keratan

1. <div id="shineflip" >  
2.       <div id="shineflip- halaman">  
3.           <kanvas id=" kanvas">kanvas>  
4.           <kanvas id=" page-mid-canvas">kanvas>  
5.           <bahagian kelas=<"🎜>"halaman >  
6.               <div><img> src="imej/0.jpg" lebar= "475" tinggi="482" /> div>  
7.               <span gaya=<🎜"><🎜 18px;"><img src="imej/zh.png" tinggi="482"  />span>             
8. bahagian>             
9. <bahagian kelas=<"🎜>"halaman  gaya="background:url(images/left_pk.jpg)">  
10.               <div><img> src="imej/1.jpg" lebar= "466" tinggi="463" gaya="float:right;margin-top:9px;" /> div>  
11.           bahagian>  
12.           <bahagian kelas=<"🎜>"halaman >  
13.               <div><img> src="imej/2.jpg" lebar= "466" tinggi="463" gaya="float:left;margin-top:9px;" /> div>  
14.           bahagian>  
15.           <bahagian kelas=<"🎜>"halaman >
                 
16. <div><img> src="imej/3.jpg" lebar= "466" tinggi="463" gaya="float:right;margin-top:9px;" /> div>  
          
17. bahagian>  
          
18. <bahagian kelas=<"🎜>"halaman >  
19.               <div><img> src="imej/4.jpg" lebar= "466" tinggi="463" gaya="float:left;margin-top:9px;" /> div>  
20.           bahagian>  
21.           <bahagian kelas=<"🎜>"halaman >  
22.               <div><img> src="imej/5.jpg" lebar= "466" tinggi="463" gaya="float:right;margin-top:9px;" /> div>  
23.           bahagian>  
24.           <bahagian kelas=<"🎜>"halaman  gaya="background:url(images/right_pk.jpg)">
                 
25. <div><img> src="imej/6.jpg" lebar= "466" tinggi="463" gaya="float:left;margin-top:9px;" /> div>  
          
26. bahagian>  
          
27. <bahagian kelas=<"🎜>"halaman >  
28.               <div><img> src="imej/24.jpg" lebar= "475" tinggi="482" /> div>  
29.               <span gaya=<🎜"><🎜 18px;"><img src="imej/zh.png" tinggi="482"  />span>  
          
30. bahagian>  
      
31. div>  
  
32. div>  

CSS样式：

Kod CSS

复制内容到剪贴板

1. badan, h2, p {   
2.  margin: 0;   
3.  lapik: 0;   
4. }   
5.   
6. badan {   
7.  latar belakang: url("../images/cover.jpg" ) tidak berulang;   
8.  -webkit-latar belakang-saiz: kulit;   
9.     -moz-latar belakang-saiz: kulit;   
10.     -o-latar belakang-saiz: kulit;   
11.     latar belakang-saiz: kulit;   
12.  warna: #333;   
13.  fon-keluarga: Helvetica, sans-serif;   
14.  text-align:center;   
15. }   
16. #shinefbibir {   
17.  /*latar belakang: url("../images/cover.jpg") tidak berulang;*/  
18.  -o-latar belakang-saiz: 100% 100%;    
19.  -webkit-latar belakang-saiz: 100% 100%;   
20.  -moz-latar belakang-saiz: 100% 100%;   
21.  latar belakang-saiz: 100% 100%;   
22.  kedudukan: mutlak;   
23. }   
24.   
25. #shinefmuka-muka bibir   
26. {   
27. /*    warna latar belakang:#fafafa;*/  
28.     latar belakang-ulang: ulang;   
29.     kedudukan: mutlak;   
30.     z-indeks: 2;   
31. }   
32.   
33. #shinefbahagian bibir muka.muka_depan, #shinefbahagian muka surat bibir.cover_background{   
34.  kedudukan: mutlak;   
35.  limpahan: tersembunyi;   
36.  warna: #ffffff;   
37. }  
38.   
39. #shinefmuka-bibir .kulit_depan_kandungan   
40. {   
41.  kedudukan: mutlak;    
42.  z-indeks: 1;   
43.  limpahan:tersembunyi;   
44.  putihruang-putih:nowrap;   
45.  -ms-user-select:tiada;   
46.  -webkit-user-select:tiada;   
47.  -moz-user-select:tiada;   
48. }   
49.   
50. #shinefmuka-bibir .penutup_depan_belakang   
51. {   
52.  kedudukan: mutlak;    
53.  z-indeks: 0;   
54. }   
55.   
56. #shinefmuka-bibir .kandungan_latar belakang   
57. {   
58.  kedudukan: mutlak;    
59.  z-indeks: 1;   
60.  limpahan:tersembunyi;   
61.  putihruang-putih:nowrap;   
62.  -ms-user-select:tiada;   
63.  -webkit-user-select:tiada;   
64.  -moz-user-select:tiada;   
65. }   
66.   
67. #shinefmuka-bibir .cover_background_back   
68. {   
69.  kedudukan: mutlak;    
70.  z-indeks: 0;   
71. }   
72.   
73. #shinefbibir bahagian.pageflip    
74. {   
75.  paparan: sekat;   
76.  kedudukan: mutlak;   
77.  limpahan: tersembunyi;   
78. }  
79.   
80. #shinefbahagian muka surat bibir.halaman {   
81.     //warna latar belakang: #fafafa;   
82.  paparan: sekat;   
83.  kedudukan: mutlak;   
84.  limpahan: tersembunyi;   
85. }   
86.  #shineflip-pages-flipcontent,#shineflip-pages bahagian>div {   
87.   paparan: sekat;   
88.   saiz fon: 12px;   
89.   kedudukan: mutlak;   
90.   limpahan: tersembunyi;   
91.   lebar:100%;   
92.   tinggi:100%;   
93.  }   
94.  #shineflip-pages-flipcontent,#shineflip-pages bahagian>span {   
95.   paparan: sekat;   
96.   saiz fon: 12px;   
97.   kedudukan: mutlak;   
98.   limpahan: tersembunyi;   
99.  }   
100.  #shineflip-pages-flipcontent p,   
101.  #shineflip-pages-flipcontent h2,   
102.  #shinefbahagian muka surat bibir p,   
103.  #shinefbahagian halaman bibir h2 {   
104.   tinggi garis: 1.4em;   
105.   text-align: justify;   
106.  }   
107.   
108. #shinefkanvas bibir {   
109.  kedudukan: mutlak;   
110.  z-indeks: 0;   
111. }
113. #shineflip-page-mid-canvas {
114. Position: absolut;
115. Zeiger-Ereignisse: keine;
116. z-index: 0;
}

Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, er gefällt euch allen.