很酷的HTML5電子書翻頁動畫特效

2020-03-24 18:07:03

字體：大中小

供稿：網(wǎng)友

本文分享一款很酷的HTML5電子書翻頁動畫特效，這款HTML5翻頁動畫可以用鼠標拖動頁面來模擬手動翻頁的效果，也可以點擊書頁的邊框來快速翻頁。之前也分享過一款HTML5 3D書本翻頁特效，3D視覺效果更加強烈。在線演示地址如下：http://demo.phpstudy.net/js/2016/html5-book-page/實現(xiàn)的代碼：XML/HTML Code復制內(nèi)容到剪貼板
divid= shineflip-pages canvasid= shineflip-canvas /canvas canvasid= shineflip-page-mid-canvas /canvas section >CSSyangshi_10628_1.html' target='_blank'>CSS樣式：
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-pagessection.cover_front,#shineflip-pagessection.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-pagessection.pageflip { display:block; position:absolute; overflow:hidden; } #shineflip-pagessection.page{ //background-color:#fafafa; display:block; position:absolute; overflow:hidden; } #shineflip-pages-flipcontent,#shineflip-pagessection div{ display:block; font-size:12px; position:absolute; overflow:hidden; width:100%; height:100%; } #shineflip-pages-flipcontent,#shineflip-pagessection span{ display:block; font-size:12px; position:absolute; overflow:hidden; } #shineflip-pages-flipcontentp, #shineflip-pages-flipcontenth2, #shineflip-pagessectionp, #shineflip-pagessectionh2{ 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; }html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。

上一篇：HTML代碼制作滾動文字

下一篇：HTML中頭部標簽的用法