Shulou(Shulou.com)06/03 Report--

How to make HTML5 e-book page turning animation special effects, in view of this problem, this article introduces the corresponding analysis and solution in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible method.

This HTML5 page turning animation can use the mouse to drag the page to simulate the effect of manual page turning, or you can click on the border of the page to quickly turn the page.

The online demo address is as follows:

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

Code for implementation:

XML/HTML Code copies content to the clipboard

CSS style: CSS Code copies content to clipboard body, h3, p {margin: 0; padding: 0;} body {background: url (".. / images/cover.jpg") no-repeat;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover; background-size: # 333; font-family: Helvetica, sans-serif Text-align:center;} # shineflip {/ * background: url (".. / images/cover.jpg") no-repeat;*/-o-background-size: 100% 100%;-webkit-background-size: 100% 100%;-moz-background-size: 100% 100%; background-size: 100% 100%; position: absolute;} # shineflip-pages {/ * background-color:#fafafa * / background-repeat: repeat; position: absolute; z-index: 2;} # shineflip-pages section.cover_front, # shineflip-pages section.cover_background {position: absolute; overflow:hidden; color: # ffffff;} # shineflip-pages. Cover _ front_content {position: absolute; z-index: 1; overflow:hidden; whitewhite-space:nowrap;-ms-user-select:none -webkit-user-select:none;-moz-user-select:none;} # shineflip-pages. Cover _ front_back {position: absolute; z-index: 0;} # shineflip-pages. Cover _ background_content {position: absolute; z-index: 1; overflow:hidden; whitewhite-space:nowrap;-ms-user-select:none;-webkit-user-select:none -moz-user-select:none;} # shineflip-pages .cover _ background_back {position: absolute; z-index: 0;} # shineflip-pages section.pageflip {display: block; position: absolute; overflow: hidden;} # shineflip-pages section.page {/ / background-color: # fafafa; display: block; position: absolute; overflow: hidden } # shineflip-pages-flipcontent,#shineflip-pages section > div {display: block; font-size: 12px; position: absolute; overflow: hidden; width:100%; height:100%;} # shineflip-pages-flipcontent,#shineflip-pages section > span {display: block; font-size: 12px; position: absolute; overflow: hidden } # shineflip-pages-flipcontent p, # shineflip-pages-flipcontent h3, # shineflip-pages section p, # shineflip-pages section h3 {line-height: 1.4em; text-align: justify;} # shineflip-canvas {position: absolute; z-index: 0;} # shineflip-page-mid-canvas {position: absolute; pointer-events: none; z-index: 0 } this is the answer to the question on how to make HTML5 e-book page-turning animation. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel to learn more about it.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.