Cool HTML5 e-book page turning animation effects_html5 tutorial skills-H5 Tutorial-php.cn

Cool HTML5 e-book page turning animation effects_html5 tutorial skills

WBOY

Release： 2016-05-16 15:45:48

Original

2843 people have browsed it

This article shares a cool HTML5 e-book page turning animation effect. This HTML5 page turning animation can use the mouse to drag the page to simulate the effect of manual page turning. You can also click on the border of the book page to quickly turn the page. I have also shared an HTML5 3D book page turning effect before, and the 3D visual effect is more intense.

The online demo address is as follows:

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

Implementation code:

XML/HTML CodeCopy content to clipboard

<div id="shineflip">
<div id="shineflip-pages">
<canvas id="shineflip-canvas">canvas>
<canvas id="shineflip-page-mid-canvas">canvas>
<section class="page">
<div><img src="images/0.jpg" width="475" height="482" />div>
<span style="left:18px;"><img src="images/zh.png" height="482" />span>
section>
<section class="page" style="background:url(images/left_pk.jpg)">
<div><img src="images/1.jpg" width="466" height="463" style="float:right;margin-top:9px;" />div>
section>
<section class="page">
<div><img src="images/2.jpg" width="466" height="463" style="float:left;margin-top:9px;" />div>
section>
<section class="page">
<div><img src="images/3.jpg" width="466" height="463" style="float:right;margin-top:9px;" />div>
section>
<section class="page">
<div><img src="images/4.jpg" width="466" height="463" style="float:left;margin-top:9px;" />div>
section>
<section class="page">
<div><img src="images/5.jpg" width="466" height="463" style="float:right;margin-top:9px;" />div>
section>
<section class="page" style="background:url(images/right_pk.jpg)">
<div><img src="images/6.jpg" width="466" height="463" style="float:left;margin-top:9px;" />div>
section>
<section class="page">
<div><img src="images/24.jpg" width="475" height="482" />div>
<span style="right:18px;"><img src="images/zh.png" height="482" />span>
section>
div>
div>

CSS样式：

CSS Code复制内容到剪贴板

body, h2, 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: cover;
color: #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 h2,
#shineflip-pages section p,
#shineflip-pages section h2 {
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;
}

The above is the entire content of this article, I hope you all like it.