欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

很酷的HTML5电子书翻页动画特效_html5教程技巧

程序员文章站 2022-03-11 09:05:16
...
本文分享一款很酷的HTML5电子书翻页动画特效,这款HTML5翻页动画可以用鼠标拖动页面来模拟手动翻页的效果,也可以点击书页的边框来快速翻页。之前也分享过一款HTML5 3D书本翻页特效,3D视觉效果更加强烈。

很酷的HTML5电子书翻页动画特效_html5教程技巧

在线演示地址如下:

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

实现的代码:

XML/HTML Code复制内容到剪贴板
  1. div id="shineflip">
  2. div id="shineflip-pages">
  3. canvas id="shineflip-canvas">canvas>
  4. canvas id="shineflip-page-mid-canvas">canvas>
  5. section class="page">
  6. div>img src="images/0.jpg" width="475" height="482" />div>
  7. span style="left:18px;">img src="images/zh.png" height="482" />span>
  8. section>
  9. section class="page" style="background:url(images/left_pk.jpg)">
  10. div>img src="images/1.jpg" width="466" height="463" style="float:right;margin-top:9px;" />div>
  11. section>
  12. section class="page">
  13. div>img src="images/2.jpg" width="466" height="463" style="float:left;margin-top:9px;" />div>
  14. section>
  15. section class="page">
  16. div>img src="images/3.jpg" width="466" height="463" style="float:right;margin-top:9px;" />div>
  17. section>
  18. section class="page">
  19. div>img src="images/4.jpg" width="466" height="463" style="float:left;margin-top:9px;" />div>
  20. section>
  21. section class="page">
  22. div>img src="images/5.jpg" width="466" height="463" style="float:right;margin-top:9px;" />div>
  23. section>
  24. section class="page" style="background:url(images/right_pk.jpg)">
  25. div>img src="images/6.jpg" width="466" height="463" style="float:left;margin-top:9px;" />div>
  26. section>
  27. section class="page">
  28. div>img src="images/24.jpg" width="475" height="482" />div>
  29. span style="right:18px;">img src="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. }
  5. body {
  6. background: url("../images/cover.jpg") no-repeat;
  7. -webkit-background-size: cover;
  8. -moz-background-size: cover;
  9. -o-background-size: cover;
  10. background-size: cover;
  11. color: #333;
  12. font-family: Helvetica, sans-serif;
  13. text-align:center;
  14. }
  15. #shineflip {
  16. /*background: url("../images/cover.jpg") no-repeat;*/
  17. -o-background-size: 100% 100%;
  18. -webkit-background-size: 100% 100%;
  19. -moz-background-size: 100% 100%;
  20. background-size: 100% 100%;
  21. position: absolute;
  22. }
  23. #shineflip-pages
  24. {
  25. /* background-color:#fafafa;*/
  26. background-repeat: repeat;
  27. position: absolute;
  28. z-index: 2;
  29. }
  30. #shineflip-pages section.cover_front, #shineflip-pages section.cover_background{
  31. position: absolute;
  32. overflow: hidden;
  33. color: #ffffff;
  34. }
  35. #shineflip-pages .cover_front_content
  36. {
  37. position: absolute;
  38. z-index: 1;
  39. overflow:hidden;
  40. whitewhite-space:nowrap;
  41. -ms-user-select:none;
  42. -webkit-user-select:none;
  43. -moz-user-select:none;
  44. }
  45. #shineflip-pages .cover_front_back
  46. {
  47. position: absolute;
  48. z-index: 0;
  49. }
  50. #shineflip-pages .cover_background_content
  51. {
  52. position: absolute;
  53. z-index: 1;
  54. overflow:hidden;
  55. whitewhite-space:nowrap;
  56. -ms-user-select:none;
  57. -webkit-user-select:none;
  58. -moz-user-select:none;
  59. }
  60. #shineflip-pages .cover_background_back
  61. {
  62. position: absolute;
  63. z-index: 0;
  64. }
  65. #shineflip-pages section.pageflip
  66. {
  67. display: block;
  68. position: absolute;
  69. overflow: hidden;
  70. }
  71. #shineflip-pages section.page {
  72. //background-color: #fafafa;
  73. display: block;
  74. position: absolute;
  75. overflow: hidden;
  76. }
  77. #shineflip-pages-flipcontent,#shineflip-pages section>div {
  78. display: block;
  79. font-size: 12px;
  80. position: absolute;
  81. overflow: hidden;
  82. width:100%;
  83. height:100%;
  84. }
  85. #shineflip-pages-flipcontent,#shineflip-pages section>span {
  86. display: block;
  87. font-size: 12px;
  88. position: absolute;
  89. overflow: hidden;
  90. }
  91. #shineflip-pages-flipcontent p,
  92. #shineflip-pages-flipcontent h2,
  93. #shineflip-pages section p,
  94. #shineflip-pages section h2 {
  95. line-height: 1.4em;
  96. text-align: justify;
  97. }
  98. #shineflip-canvas {
  99. position: absolute;
  100. z-index: 0;
  101. }
  102. #shineflip-page-mid-canvas {
  103. position: absolute;
  104. pointer-events: none;
  105. z-index: 0;
  106. }

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