很酷的HTML5電子書翻頁動(dòng)畫特效
發(fā)布時(shí)間：2016-02-25 16:06:56 作者：佚名 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了很酷的HTML5電子書翻頁動(dòng)畫特效，這款HTML5翻頁動(dòng)畫可以用鼠標(biāo)拖動(dòng)頁面來模擬手動(dòng)翻頁的效果，也可以點(diǎn)擊書頁的邊框來快速翻頁，感興趣的小伙伴們可以參考一下
本文分享一款很酷的HTML5電子書翻頁動(dòng)畫特效，這款HTML5翻頁動(dòng)畫可以用鼠標(biāo)拖動(dòng)頁面來模擬手動(dòng)翻頁的效果，也可以點(diǎn)擊書頁的邊框來快速翻頁。之前也分享過一款HTML5 3D書本翻頁特效，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;
- }
以上就是本文的全部內(nèi)容，希望大家喜歡。
相關(guān)文章
css transform 翻頁動(dòng)畫記錄的實(shí)現(xiàn)
這篇文章主要介紹了css transform 翻頁動(dòng)畫記錄的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)2020-12-04
HTML5 3D書本翻頁動(dòng)畫的實(shí)現(xiàn)示例
這是一款十分炫酷的HTML5 3D書本翻頁動(dòng)畫，效果相對比較簡單，拖拽鼠標(biāo)模擬用手翻頁，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-28
使用純CSS實(shí)現(xiàn)書籍3D翻頁效果的示例
這篇文章主要介紹了使用純CSS實(shí)現(xiàn)書籍3D翻頁效果的示例的相關(guān)資料,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-19- 這篇文章主要介紹了一個(gè)不錯(cuò)的html 打印代碼支持翻頁，非常實(shí)用，需要的朋友可以參考下2014-09-17
css實(shí)現(xiàn)點(diǎn)擊滾動(dòng)翻頁的效果(無js)
滾動(dòng)翻頁這樣的效果想必各位在瀏覽網(wǎng)頁的時(shí)候都有見過吧，本文將使用純css實(shí)現(xiàn)這個(gè)效果，不含有任何的輔助代碼，感興趣的朋友可以參考下哈，希望可以幫助到你2013-03-22- 這篇文章主要介紹了css3實(shí)現(xiàn)書本翻頁效果的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)2021-03-08
