コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > H5 チュートリアル > 本文

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

WBOY
リリース： 2016-05-16 15:45:48
オリジナル
2827 人が閲覧しました

この記事では、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. ポインター - イベント: なし;
    116. z-index
  116. : 0; }
    118. 以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。
関連ラベル：
html5 電子書籍 ページをめくる
ソース：php.cn
前の記事：HTML5_html5 チュートリアルのスキルに基づいたオンラインビデオ再生ソリューションに関する簡単な説明 次の記事：リアルな HTML5 落ち葉アニメーション_html5 チュートリアル スキル
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
ページのメインディスプレイに画像を表示するにはどうすればよいですか? 私がやりたいのは、NASAAPI を使用して写真を受信することです。これらの写真は、マイページのサムネイルとメインディスプレイに表示されます。コードがサムネイルから画像を取得してペ...
から 2024-04-06 15:33:12
0
1
433
PDF ファイルは HTML5 と JavaScript を実行できますか? PDF に埋め込まれるため、どのコンピュータでもブロックされないプログラムを作成してみようという愚かな考えがあります (JavaScript は PDF 内で実行できると聞きました...
から 2024-04-05 12:57:00
0
1
456
HTML5 の enctype と formenctype の違いは何ですか? HTMLLivingStandard (別名、新しい HTML5 仕様) の属性 enctype と formenctype の違いは何でしょうか?私は HTML Standard...
から 2024-04-02 11:47:56
0
1
275
ページをモバイル対応にしますか? たくさんの Web ページといくつかの Web サイトがあります。問題は、私は初心者だということです。基本的な html5 と css3 を使用していますが、それらをスケールアップ...
から 2024-04-01 20:42:38
0
1
259
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート