社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > web前端 > H5教程 > 很酷的HTML5電子書翻頁動畫特效_html5教學技巧

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

WBOY
發布： 2016-05-16 15:45:48
原創
2848 人瀏覽過

本文分享一款很酷的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. >
  3.              畫布 畫布 畫布 畫布 
    4. 畫佈"
  4. >畫布>             畫布 畫布 
    5. 畫布
  5.  畫布 畫布中間畫布">畫布>  
  6.           部分 部分 部分 >                 divdivdiv src="images/0.jpg" 寬度
  7. = 寬度= "475" 身高="482"   div>                 跨度 8px ;">
    8. img
  8.  src=src=
    9. images/zh.png"
  9.  高度="482"  🎜>跨度>             部分
    10. >             部分 部分 部分  樣式="背景: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.  
  25. 樣式="背景:url(images/right_pk.jpg)">>>               divdivdiv src="images/6.jpg" 寬度= 寬度= 「466」 身高=「463」=
    26. "float:left;margin-top:9px;"
  26.  /> />
    27. div
  27. >             部分>  
    28.           部分 部分 部分 >  
  28.               divdivdiv src="images/24.jpg" 寬度 寬度= "475" 身高="482"  
    29.  
  29. div>                 跨度 8px ;">img src=src= images/zh.png" 高度="482"  🎜>
  30. 跨度>             
  31. 部分>         
  32. div>    
    33. 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, , 
    15. ;   
    16.  
  16. 文字對齊:居中
    17. ;   
  17. }   
  18. #shinef唇 {     /*背景： url("../images/cover.jpg") 無重複；*/
  19.     -o-背景-大小
  20. ：100% 100%；  大小：100% 100%；   大小    -webkit-背景-
    21. 大小
  21. ：100% 100%；   -moz-背景-大小
    22. ：100% 100%； >
  22.  背景-背景： 100% 100%；  ： 100% 100%；
  23.  位置
  24. ：絕對
  25. ；    }   
  26.   
  27. #shinef唇頁    
  28. {    /*    背景顏色:#fafafa;*/  
  29.     背景重複: 重複;  
    30. ;  
  30.     位置
  31. ：絕對
  32. ；   絕對
    33. ；   
  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. ；    
  57. ；    
  58. ；    ；    ；    ；    
  59. ；    ；    
  60.  z 索引：0；    }   
  61.    #shinef唇頁 .cover_background_content   
    62. {   
  62.  位置
    63. ：
  63. 絕對；    ；    
  64. ；    ；    
    65. ；    
  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. ；   
  84.  溢出：隱藏
    85. ；   
    86. }   
  86.  #shineflip-pages-flipcontent,#shinef
    87. lip-pages 
  87.   顯示: 阻止;   
  88. ;      字體大小: 
  89. 12px;   12px;      
  90. 位置：絕對；  
    91.   
  91. 溢出：隱藏
    92. ；  
  92.   寬度
  93. ：100%；   
  94.   高度：100%；     }   
  95.  #shineflip-pages-flipcontent，#shineflip-pages s>
    96.   
  96. 顯示: 阻止;   ;   
  97.   字體大小: 12px
    98. ;   
  98. 12px;   ;   位置
    99. ：
  99. 絕對
    100. ；  
  100.   溢出
  101. ：隱藏；  
  102. ；    }   
  103.  #shineflip-pages-flipcontent p，  
  104.  #shineflip-pages-flipcontent h2，  
  105.  #shinef唇頁部分 p，    
    106. #shinef
  106. 唇頁部分 h2 {   
  107.   
    108. 高
  108. ：1.4em；     
    109. 文字對齊
  109. ：對齊；   ；   
  110.  }      
  111. #shinef唇畫布 {     位置：絕對；     z 索引：0；    }  
  112.   
  113. #shineflip-page-mid-canvas {  
    114. -mid-canvas {  
  114.  position: absolute
  115. ;   ;    pointer-events: 
  116. none;   none;   
  117. ;   
 
z-index

: 0;   

}    以上就是本文的全部內容，希望大家喜歡。
相關標籤：
html5 電子書 翻頁
來源：php.cn
上一篇：淺談基於HTML5的線上影片播放方案_html5教學技巧 下一篇：逼真的HTML5樹葉飄落動畫_html5教學技巧
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
如何讓我的圖像顯示在頁面的主顯示幕上？ 我想做的是使用NASAAPI接收一些照片。然後在我的網頁的縮圖和主顯示屏上顯示這些照片。我只是弄清楚為什麼程式碼不從縮圖中獲取圖像並將其顯示在頁面上。我還使用HTML5以上版本的模...
來自於 2024-04-06 15:33:12
0
1
433
PDF檔案能夠運行HTML5和Javascript嗎？ 我有一個愚蠢的想法，想嘗試製作一個在任何計算機上都不會被阻止的程序，因為它將嵌入在PDF中（我聽說Javascript可以在PDF中運行）。它將在PDF檔案中運行HTML5和Jav...
來自於 2024-04-05 12:57:00
0
1
456
HTML5中的enctype和formenctype有什麼差別？ 我只是想知道HTMLLivingStandard（又稱新的HTML5規範）中的屬性enctype和formenctype之間有什麼區別？我一直在閱讀《開發人員的HTML標準》，但似...
來自於 2024-04-02 11:47:56
0
1
275
使頁面適合行動裝置嗎？ 我有很多網頁和一些網站。問題是，我是一個初學者。我使用基本的html5和css3，但我不知道如何使它們放大、縮小並且適合行動裝置。例如，這是我的頁面之一和我的網站之一，您可以在其中...
來自於 2024-04-01 20:42:38
0
1
259
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板