久久久国产一级片,日韩欧美在线综合网,亚洲国产精品一

主頁(yè) > 知識(shí)庫(kù) > 很酷的HTML5電子書翻頁(yè)動(dòng)畫特效

很酷的HTML5電子書翻頁(yè)動(dòng)畫特效

本文分享一款很酷的HTML5電子書翻頁(yè)動(dòng)畫特效，這款HTML5翻頁(yè)動(dòng)畫可以用鼠標(biāo)拖動(dòng)頁(yè)面來(lái)模擬手動(dòng)翻頁(yè)的效果，也可以點(diǎn)擊書頁(yè)的邊框來(lái)快速翻頁(yè)。之前也分享過一款HTML5 3D書本翻頁(yè)特效，3D視覺效果更加強(qiáng)烈。

在線演示地址如下：

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

實(shí)現(xiàn)的代碼：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<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復(fù)制內(nèi)容到剪貼板

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;
}

以上就是本文的全部?jī)?nèi)容，希望大家喜歡。

標(biāo)簽：楊凌德州鶴崗撫順蚌埠黃山辛集內(nèi)蒙古

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《很酷的HTML5電子書翻頁(yè)動(dòng)畫特效》，本文關(guān)鍵詞很,酷,的,HTML5,電子書,翻頁(yè),；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無(wú)關(guān)。