很酷的HTML5电子书翻页动画特效

网络
少了你的风景，我没有美丽的人生。天气真好!一起去郊游吧，拥抱大自然，呼吸清新的空气，享受悠闲和温馨。

本文分享一款很酷的HTML5电子书翻页动画特效，这款HTML5翻页动画可以用鼠标拖动页面来模拟手动翻页的效果，也可以点击书页的边框来快速翻页。之前也分享过一款HTML5 3D书本翻页特效，3D视觉效果更加强烈。

在线演示地址如下：

http://demo.haodaima.com/js/2016/html5-book-page/

实现的代码：

XML/HTML Code复制内容到剪贴板
  1. <divid="shineflip">
  2. <divid="shineflip-pages">
  3. <canvasid="shineflip-canvas"></canvas>
  4. <canvasid="shineflip-page-mid-canvas"></canvas>
  5. <sectionclass="page">
  6. <div><imgsrc="images/0.jpg"width="475"height="482"/></div>
  7. <spanstyle="left:18px;"><imgsrc="images/zh.png"height="482"/></span>
  8. </section>
  9. <sectionclass="page"style="background:url(images/left_pk.jpg)">
  10. <div><imgsrc="images/1.jpg"width="466"height="463"style="float:right;margin-top:9px;"/></div>
  11. </section>
  12. <sectionclass="page">
  13. <div><imgsrc="images/2.jpg"width="466"height="463"style="float:left;margin-top:9px;"/></div>
  14. </section>
  15. <sectionclass="page">
  16. <div><imgsrc="images/3.jpg"width="466"height="463"style="float:right;margin-top:9px;"/></div>
  17. </section>
  18. <sectionclass="page">
  19. <div><imgsrc="images/4.jpg"width="466"height="463"style="float:left;margin-top:9px;"/></div>
  20. </section>
  21. <sectionclass="page">
  22. <div><imgsrc="images/5.jpg"width="466"height="463"style="float:right;margin-top:9px;"/></div>
  23. </section>
  24. <sectionclass="page"style="background:url(images/right_pk.jpg)">
  25. <div><imgsrc="images/6.jpg"width="466"height="463"style="float:left;margin-top:9px;"/></div>
  26. </section>
  27. <sectionclass="page">
  28. <div><imgsrc="images/24.jpg"width="475"height="482"/></div>
  29. <spanstyle="right:18px;"><imgsrc="images/zh.png"height="482"/></span>
  30. </section>
  31. </div>
  32. </div>

CSS样式：

CSS Code复制内容到剪贴板
  1. body,h2,p{
  2. margin:0;
  3. padding:0;
  4. }
  6. body{
  7. background:url("../images/cover.jpg")no-repeat;
  8. -webkit-background-size:cover;
  9. -moz-background-size:cover;
  10. -o-background-size:cover;
  11. background-size:cover;
  12. color:#333;
  13. font-family:Helvetica,sans-serif;
  14. text-align:center;
  15. }
  16. #shineflip{
  17. /*background:url("../images/cover.jpg")no-repeat;*/
  18. -o-background-size:100%100%;
  19. -webkit-background-size:100%100%;
  20. -moz-background-size:100%100%;
  21. background-size:100%100%;
  22. position:absolute;
  23. }
  25. #shineflip-pages
  26. {
  27. /*background-color:#fafafa;*/
  28. background-repeat:repeat;
  29. position:absolute;
  30. z-index:2;
  31. }
  33. #shineflip-pagessection.cover_front,#shineflip-pagessection.cover_background{
  34. position:absolute;
  35. overflow:hidden;
  36. color:#ffffff;
  37. }
  39. #shineflip-pages.cover_front_content
  40. {
  41. position:absolute;
  42. z-index:1;
  43. overflow:hidden;
  44. whitewhite-space:nowrap;
  45. -ms-user-select:none;
  46. -webkit-user-select:none;
  47. -moz-user-select:none;
  48. }
  50. #shineflip-pages.cover_front_back
  51. {
  52. position:absolute;
  53. z-index:0;
  54. }
  56. #shineflip-pages.cover_background_content
  57. {
  58. position:absolute;
  59. z-index:1;
  60. overflow:hidden;
  61. whitewhite-space:nowrap;
  62. -ms-user-select:none;
  63. -webkit-user-select:none;
  64. -moz-user-select:none;
  65. }
  67. #shineflip-pages.cover_background_back
  68. {
  69. position:absolute;
  70. z-index:0;
  71. }
  73. #shineflip-pagessection.pageflip
  74. {
  75. display:block;
  76. position:absolute;
  77. overflow:hidden;
  78. }
  80. #shineflip-pagessection.page{
  81. //background-color:#fafafa;
  82. display:block;
  83. position:absolute;
  84. overflow:hidden;
  85. }
  86. #shineflip-pages-flipcontent,#shineflip-pagessection>div{
  87. display:block;
  88. font-size:12px;
  89. position:absolute;
  90. overflow:hidden;
  91. width:100%;
  92. height:100%;
  93. }
  94. #shineflip-pages-flipcontent,#shineflip-pagessection>span{
  95. display:block;
  96. font-size:12px;
  97. position:absolute;
  98. overflow:hidden;
  99. }
  100. #shineflip-pages-flipcontentp,
  101. #shineflip-pages-flipcontenth2,
  102. #shineflip-pagessectionp,
  103. #shineflip-pagessectionh2{
  104. line-height:1.4em;
  105. text-align:justify;
  106. }
  108. #shineflip-canvas{
  109. position:absolute;
  110. z-index:0;
  111. }
  113. #shineflip-page-mid-canvas{
  114. position:absolute;
  115. pointer-events:none;
  116. z-index:0;
  117. }

以上就是本文的全部内容，希望大家喜欢。

您可能有感兴趣的文章
HTML5 3D书本翻页动画的如何实现示例