Cool page de livre électronique HTML5 tournant les compétences du tutoriel d'effets d'animation_html5

Cet article partage un effet d'animation de rotation de page de livre électronique HTML5 sympa. Cette animation de rotation de page HTML5 peut utiliser la souris pour faire glisser la page afin de simuler l'effet de rotation de page manuelle. Vous pouvez également cliquer sur la bordure de la page du livre. pour tourner rapidement la page. J'ai également partagé un effet de rotation de page de livre HTML5 3D auparavant, et l'effet visuel 3D est plus intense.

L'adresse de la démo en ligne est la suivante :

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

Code d'implémentation :

Code XML/HTMLCopier le contenu dans le presse-papiers

1. <div id="shineflip" >  
2.       <div id="shineflip- pages">  
3.           <toile id="shineflip- toile">toile>  
4.           <toile id="shineflip- page-mi-toile">toile>  
5.           <section classe="page" >  
6.               <div><img src="images/0.jpg" largeur= "475" hauteur="482" /> div>  
7.               <span style="gauche : 18px;"><img src="images/zh.png" hauteur="482"  />span>  
8.           section>  
9.           <section classe="page"  style="background:url(images/left_pk.jpg)">  
10.               <div><img src="images/1.jpg" largeur= "466" hauteur="463" style="float:right;margin-top:9px;" /> div>  
11.           section>  
12.           <section classe="page" >  
13.               <div><img src="images/2.jpg" largeur= "466" hauteur="463" style="float:left;margin-top:9px;" /> div>  
14.           section>  
15.           <section classe="page" >  
16.               <div><img src="images/3.jpg" largeur= "466" hauteur="463" style="float:right;margin-top:9px;" /> div>  
17.           section>  
18.           <section classe="page" >  
19.               <div><img src="images/4.jpg" largeur= "466" hauteur="463" style="float:left;margin-top:9px;" /> div>  
20.           section>  
21.           <section classe="page" >  
22.               <div><img src="images/5.jpg" largeur= "466" hauteur="463" style="float:right;margin-top:9px;" /> div>  
23.           section>  
24.           <section classe="page"  style="background:url(images/right_pk.jpg)">  
25.               <div><img src="images/6.jpg" largeur= "466" hauteur="463" style="float:left;margin-top:9px;" /> div>  
26.           section>  
27.           <section classe="page" >  
28.               <div><img src="images/24.jpg" largeur= "475" hauteur="482" /> div>  
29.               <span style="à droite : 18px;"><img src="images/zh.png" hauteur="482"  />span>  
30.           section>  
31.       div>  
32.   div>  

CSS样式：

Code CSS复制内容到剪贴板

1. corps, h2, p {   
2.  marge : 0 ;   
3.  rembourrage : 0 ;   
4. }   
5.   
6. corps {   
7.  arrière-plan : url("../images/cover.jpg" ) pas de répétition ;   
8.  -webkit-fond-taille : couverture ;   
9.     -moz-fond-taille : couverture ;   
10.     -o-fond-taille : couverture ;   
11.     fond-taille : couverture ;   
12.  couleur : #333 ;   
13.  font-family : Helvetica, sans-serif ;   
14.  alignement du texte :centre ;   
15. }   
16. #shineflèvre {   
17.  /*fond : url("../images/cover.jpg") no-repeat;*/  
18.  -o-fond-taille : 100 % 100 % ;    
19.  -webkit-fond-taille : 100 % 100 % ;   
20.  -moz-fond-taille : 100 % 100 % ;   
21.  fond-taille : 100 % 100 % ;   
22.  position : absolue ;   
23. }   
24.   
25. #shineflip-pages    
26. {   
27. /*    couleur-de-fond:#fafafa;*/  
28.     répétition d'arrière-plan : répéter ;   
29.     position : absolue ;   
30.     z-index : 2 ;   
31. }   
32.   
33. #shineflip-pages section.cover_front, #shineflip-pages section.cover_background{   
34.  position : absolue ;   
35.  débordement : caché ;   
36.  couleur : #ffffff;   
37. }  
38.   
39. #shineflip-pages .cover_front_content   
40. {   
41.  position : absolue ;    
42.  z-index : 1 ;   
43.  débordement :caché ;   
44.  blancespace blanc :nowrap;   
45.  -ms-user-select :aucun ;   
46.  -webkit-user-select :aucun ;   
47.  -moz-user-select :aucun ;   
48. }   
49.   
50. #shineflip-pages .cover_front_back   
51. {   
52.  position : absolue ;    
53.  z-index : 0 ;   
54. }   
55.   
56. #shineflip-pages .cover_background_content   
57. {   
58.  position : absolue ;    
59.  z-index : 1 ;   
60.  débordement :caché ;   
61.  blancespace blanc :nowrap;   
62.  -ms-user-select :aucun ;   
63.  -webkit-user-select :aucun ;   
64.  -moz-user-select :aucun ;   
65. }   
66.   
67. #shineflip-pages .cover_background_back   
68. {   
69.  position : absolue ;    
70.  z-index : 0 ;   
71. }   
72.   
73. #shineflip-pages section.pageflip    
74. {   
75.  affichage : blocage ;   
76.  position : absolue ;   
77.  débordement : caché ;   
78. }  
79.   
80. #shinefsection lèvres-pages.page {   
81.     //couleur de fond : #fafafa;   
82.  affichage : blocage ;   
83.  position : absolue ;   
84.  débordement : caché ;   
85. }   
86.  #shineflip-pages-flipcontent,#shineflip-pages section>div {   
87.   affichage : blocage ;   
88.   taille de police : 12px ;   
89.   position : absolue ;   
90.   débordement : caché ;   
91.   largeur : 100 % ;   
92.   hauteur : 100 % ;   
93.  }   
94.  #shineflip-pages-flipcontent,#shineflip-pages section>span {   
95.   affichage : blocage ;   
96.   taille de police : 12px ;   
97.   position : absolue ;   
98.   débordement : caché ;   
99.  }   
100.  #shineflip-pages-flipcontent p,  
101.  #shineflip-pages-flipcontent h2,  
102.  #shinefsection lèvres-pages p,   
103.  #shineflip-pages section h2 {   
104.   hauteur de la ligne : 1,4em ;   
105.   alignement du texte : justifier ;   
106.  }   
107.   
108. #shineftoile à lèvres {   
109.  position : absolue ;   
110.  z-index : 0 ;   
111. }  
112.   
113. #shineflip-page-mid-canvas {  
-mid-canvas {  
114.  position: absolute
115. ;   ;    pointer-events: 
116. none;   none;   
117. ;   

 

z-index

: 0;   

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