Coole HTML5-E-Book-Animationseffekte zum Umblättern von Seiten. HTML5-Tutorial-Fähigkeiten

Dieser Artikel zeigt einen coolen HTML5-Animationseffekt für das Umblättern von E-Books. Mit dieser HTML5-Animation können Sie die Seite ziehen, um den Effekt des manuellen Umblätterns zu simulieren um die Seite schnell umzublättern. Ich habe auch schon einmal einen HTML5-3D-Buchumblättereffekt geteilt, und der visuelle 3D-Effekt ist intensiver.

Die Online-Demo-Adresse lautet wie folgt:

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

Implementierungscode:

XML/HTML-CodeInhalt in die Zwischenablage kopieren

1. <div id="shineflip" >  
2.       <div id="shineflip- Seiten">  
3.           <Leinwand id="shineflip- Leinwand">Leinwand>  
4.           <Leinwand id="shineflip- page-mid-canvas">canvas>  
5.           <Abschnitt Klasse="Seite" >  
6.               src="images/0.jpg" width= "475" Höhe="482" /> div>                 18px;"><img 
src
7. ="images/zh.png" Höhe="482"  />span>             Abschnitt>             <Abschnitt Klasse
=
8. "Seite"  Stil="background:url(images/left_pk.jpg)"
>
9.   
10.               src="images/1.jpg" width= "466" Höhe="463" Stil="float:right;margin-top:9px;" /> div>             Abschnitt>  
11.           <Abschnitt Klasse
=
12. "Seite" >                 src="images/2.jpg" 
width
13. = "466" Höhe="463" Stil="float:left;margin-top:9px;" /> div>             Abschnitt>             <Abschnitt Klasse
=
14. "Seite" >                 
src
15. ="images/3.jpg" width= "466" Höhe=
"463"
16.  Stil="float:right;margin-top:9px;" /> div>             Abschnitt>             <Abschnitt Klasse="Seite" >  
17.               src="images/4.jpg" width= "466" Höhe="463" Stil="float:left;margin-top:9px;" /> div>             Abschnitt>  
18.           <Abschnitt Klasse
=
19. "Seite" >                 src="images/5.jpg" 
width
20. = "466" Höhe="463" Stil="float:right;margin-top:9px;" /> div>             Abschnitt>             <Abschnitt Klasse
=
21. "Seite"  Stil="background:url(images/right_pk.jpg)"
>
22.                  src="images/6.jpg" width= "466" Höhe=
"463"
23.  Stil="float:left;margin-top:9px;" /> div>             Abschnitt>             <Abschnitt Klasse="Seite" >  
24.               src="images/24.jpg" width= "475" Höhe="482" /> div>                 18px;"><img 
src
25. ="images/zh.png" Höhe="482"  />span>             Abschnitt>         div>  
26.   div>  
27. CSS样式： CSS-Code
28. 复制内容到剪贴板
    1. body, h2, p {   
    2.  Marge: 0;   
    3.  Auffüllung: 0;   
    4. }   
    5.   
    6. Körper {   
    7.  Hintergrund: URL("../images/cover.jpg" ) keine Wiederholung;   
    8.  -webkit-Hintergrund-Größe: Cover;   
    9.     -moz-Hintergrund-Größe: Cover;   
    10.     -o-Hintergrund-Größe: Cover;   
    11.     Hintergrund-Größe: Cover;   
    12.  Farbe: #333;   
    13.  Schriftfamilie: Helvetica, Sans-Serif;   
    14.  text-align:center;   
    15. }   
    16. #shinefLippe {   
    17.  /*background: url("../images/cover.jpg") no-repeat;*/  
    18.  -o-Hintergrund-Größe: 100 % 100 %;    
    19.  -webkit-Hintergrund-Größe: 100 % 100 %;   
    20.  -moz-Hintergrund-Größe: 100 % 100 %;   
    21.  Hintergrund-Größe: 100 % 100 %;   
    22.  Position: absolut;   
    23. }   
    24.   
    25. #shineflip-pages    
    26. {   
    27. /*    background-color:#fafafa;*/  
    28.     Hintergrundwiederholung: Wiederholung;   
    29.     Position: absolut;   
    30.     z-index: 2;   
    31. }   
    32.   
    33. #shineflip-pages section.cover_front, #shineflip-pages section.cover_background{   
    34.  Position: absolut;   
    35.  Überlauf: versteckt;   
    36.  Farbe: #ffffff;   
    37. }  
    38.   
    39. #shineflip-pages .cover_front_content   
    40. {   
    41.  Position: absolut;    
    42.  z-index: 1;   
    43.  Überlauf:versteckt;   
    44.  whitewhite-space:nowrap;   
    45.  -ms-user-select:none;   
    46.  -webkit-user-select:none;   
    47.  -moz-user-select:none;   
    48. }   
    49.   
    50. #shineflip-pages .cover_front_back   
    51. {   
    52.  Position: absolut;    
    53.  z-index: 0;   
    54. }   
    55.   
    56. #shineflip-pages .cover_background_content   
    57. {   
    58.  Position: absolut;    
    59.  z-index: 1;   
    60.  Überlauf:versteckt;   
    61.  whitewhite-space:nowrap;   
    62.  -ms-user-select:none;   
    63.  -webkit-user-select:none;   
    64.  -moz-user-select:none;   
    65. }   
    66.   
    67. #shineflip-pages .cover_background_back   
    68. {   
    69.  Position: absolut;    
    70.  z-index: 0;   
    71. }   
    72.   
    73. #shineflip-pages section.pageflip    
    74. {   
    75.  Anzeige: Blockieren;   
    76.  Position: absolut;   
    77.  Überlauf: versteckt;   
    78. }  
    79.   
    80. #shinefLip-Pages-Abschnitt.Seite {   
    81.     //Hintergrundfarbe: #fafafa;   
    82.  Anzeige: Blockieren;   
    83.  Position: absolut;   
    84.  Überlauf: versteckt;   
    85. }   
    86.  #shineflip-pages-flipcontent,#shineflip-pages-section>div {   
    87.   Anzeige: Blockieren;   
    88.   Schriftgröße: 12px;   
    89.   Position: absolut;   
    90.   Überlauf: versteckt;   
    91.   Breite:100 %;   
    92.   Höhe:100 %;   
    93.  }   
    94.  #shineflip-pages-flipcontent,#shineflip-pages-section>span {   
    95.   Anzeige: Blockieren;   
    96.   Schriftgröße: 12px;   
    97.   Position: absolut;   
    98.   Überlauf: versteckt;   
    99.  }   
    100.  #shineflip-pages-flipcontent p,   
    101.  #shineflip-pages-flipcontent h2,   
    102.  #shinefLip-Pages-Abschnitt p,   
    103.  #shinefLip-Pages-Abschnitt h2 {   
    104.   Linienhöhe: 1,4em;   
    105.   text-align: justify;   
    106.  }   
    107.   
    108. #shineflip-canvas {   
    109.  Position: absolut;   
    110.  z-index: 0;   
    111. }
    113. #shineflèvre-page-mi-toile {
    114. position : absolue;
    115. pointeur-événements : aucun ;
    116. z-index :
    }

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.