本文分享一款很酷的HT ML 5 电 子书翻页动画特效，这款HTML5翻页动画可以用鼠标拖动页面来模拟手动翻页的效果，也可以点击书页的边框来快速翻页。之前也分享过一款HTML5 3D书本翻页特效，3D视觉效果更加强烈。
在线演示地址如下：
@L_ 304 _0@
实现的代码：
XM L/HTML Code 复制内容到剪贴板
< div &nbs p; 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" h ei ght = "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 ;m arg in -t op:9px;" /> </ div > </ section > < section class = "page" > < div > < img src = "images/2.jpg" width = "466" height = "463" style = "float:left;mar gin -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-re PE at ; - webkit - background - size : cover; -moz- background - size : cover; -o- background - size : cover; background - size : cover; color : # 333 ; font-f ami ly : Helvetica , sans -s erif ; text-align : center ; } #shinef lip { /*background: url("images/cover.jpg") no-repeat;*/ -o- background - size : 100% 100%; -webk IT - background - size : 100% 100%; -moz- background - size : 100% 100%; background - size : 100% 100%; position : absolute ; } #shinef lip-pages { /* background-color:#fafafa;*/ background-repeat : repeat ; position : absolute ; z -i ndex : 2; } #shinef lip-pages section.cover_front, #shinef lip-pages section.cover_background{ position : absolute ; overflow : hidden ; color : #ffffff ; } #shinef lip-pages .cover_front_content { position : absolute ; z-index : 1; overflow : hidden ; white white-space : nowrap ; -ms- user-select : none ; -webkit-user-select: none ; -moz-user-select: none ; } #shinef lip-pages .cover_front_back { position : absolute ; z-index : 0; } #shinef lip-pages .cover_background_content { position : absolute ; z-index : 1; overflow : hidden ; white white-space : nowrap ; -ms-user-select: none ; -webkit-user-select: none ; -moz-user-select: none ; } #shinef lip-pages .cover_background_back { position : absolute ; z-index : 0; } #shinef lip-pages section.pageflip { dis play : block ; position : absolute ; overflow : hidden ; } #shinef lip-pages section. page { // background-color : #fafafa ; display : block ; position : absolute ; overflow : hidden ; } #shinef lip-pages-flipcontent, #shinef lip-pages section>div { display : block ; font-size : 12px ; position : absolute ; overflow : hidden ; width :100%; height :100%; } #shinef lip-pages-flipcontent, #shinef lip-pages section>span { display : block ; font-size : 12px ; position : absolute ; overflow : hidden ; } #shinef lip-pages-flipcontent p, #shinef lip-pages-flipcontent h2, #shinef lip-pages section p, #shinef lip-pages section h2 { line-height : 1.4em; text-align : justify ; } #shinef lip-canvas { position : absolute ; z-index : 0; } #shinef lip- page -mid-canvas { position : absolute ; pointer -events: none ; z-index : 0; }
以上就是本文的全部内容，希望大家喜欢。
总结
以上是 为你收集整理的 很酷的HTML5电子书翻页动画特效 全部内容，希望文章能够帮你解决 很酷的HTML5电子书翻页动画特效 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于很酷的HTML5电子书翻页动画特效的详细内容...