简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home> Web Front-end> H5 Tutorial> body text

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

WBOY
Release： 2016-05-16 15:45:48
Original
2743 people have browsed it

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

在线演示地址如下：

http://demo.jb51.net/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-pages section.cover_front,#shineflip-pages section.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-pages section.pageflip
  74. {
  75. display:block;
  76. position:absolute;
  77. overflow:hidden;
  78. }
  80. #shineflip-pages section.page{
  81. //background-color:#fafafa;
  82. display:block;
  83. position:absolute;
  84. overflow:hidden;
  85. }
  86. #shineflip-pages-flipcontent,#shineflip-pages section>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-pages section>span {
  95. display:block;
  96. font-size:12px;
  97. position:absolute;
  98. overflow:hidden;
  99. }
  100. #shineflip-pages-flipcontent p,
  101. #shineflip-pages-flipcontent h2,
  102. #shineflip-pages section p,
  103. #shineflip-pages section h2 {
  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. }

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

Related labels：
html5 e-book Turn page
source：php.cn
Previous article：浅谈基于HTML5的在线视频播放方案_html5教程技巧 Next article：逼真的HTML5树叶飘落动画_html5教程技巧
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
How to set HTML5's required attribute using Javascript? I'm trying to mark a text input box as required in Javascript.
From 2023-10-13 08:52:25
0
2
317
Problem with not getting accurate mouse coordinates: using HTML5 canvas when resizing the page I want to create this pixel effect from a front-end expert. Although I can achieve the ent...
From 2023-09-12 12:20:33
0
1
280
HTML5 video M3U8 encoded with Base64 I want to add a base64 encoded M3U8 file in the Video tag of HTML5, how can I do it
From 2023-09-09 23:07:18
0
1
247
vue.js/bootstrap: onclick event method not called, error "Variable not found: updateDocument" I'm new to front-end development but have basic understanding of HTML5, CSS and Javascript...
From 2023-09-09 20:06:48
0
1
362
Remove closing slash '/' from image tag in XHTML I have a string txt1 that stores an image. Its value is in XHTML format, i.e. the element ...
From 2023-09-06 12:15:38
0
1
240
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！