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

Home

Web Front-end

H5 Tutorial

Cool HTML5 e-book page turning animation effects_html5 tutorial skills

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:45 PM

html5 e-book Turn page

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.

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