很酷的HTML5电子书翻页动画特效

更新时间:2023-04-03 05:48:46 阅读：评论：0

本文分享一款很酷的html5电子书翻页动画特效，这款html5翻页动画可以用鼠标拖动页面来模拟手动翻页的效果，也可以点击书页的边框来快速翻页。之前也分享过一款html5 3d书本翻页特效，3d视觉效果更加强烈。

在线演示地址如下：

实现的代码：

xml/html code
复制内容到剪贴板

<divid=“shineflip”> <divid=“shineflip-pages”> <canvasid=“shineflip-canvas”></canvas> <canvasid=“shineflip-page-mid-canvas”></canvas> <ctionclass=“page”> <div><imgsrc=“images/0.jpg”width=“475”height=“482”/></div> 艾弗森为什么退役<spanstyle=“left:18px;”><imgsrc=“images/zh.png”height=“482”/></span> </ction> <ctionclass=“page”style=“background:url(images/left_pk.jpg)”> <div><imgsrc=“images/1.jpg”width=“466”height=“463”style=“float:right;margin-top:9px;”/></div> </怎么反p2p终结者ction> <ctionclass=“page”> <div><imgsrc=“images/2.jpg”width=“466”height=“463”style=“float:left;margin-top:9px法布尔的昆虫记;”/></div> </ction> <ctionclass=“page”> <div><imgsrc=“images/3.jpg”width=“466”height=“463”style=“float:right;margin-top:9px;”/></div> </ction> <ctionclass=“page”> <div><imgsrc=“images/4.jpg”width=“466”height=“463”style=“float:left;margin-top:9px;”/></div> </ction> <ctionclass=“page”> <div><imgsrc=“images/5.jpg”width=“466”height=“463”style=“float:right;margin-top:9px;”/></div> </ction> <ctionclass=“page”style=“background:url(images/right_pk.jpg)”> <div><imgsrc=“images/6.jpg”width=“466”height=“463”style=“float:left;margin-top:9px;”/></div> </ction> <ctionclass=“page”> <div><imgsrc=“images/24.jpg”width=“475”height=“482”/></div> <spanstyle=“right:18px;”><imgsrc=“images/zh.png”height=“482”/></span> </ction> </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-rif; 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-pagesction.cover_front,#shineflip-pagesction.cover_background{ position:absolute; overflow:hidden; color:#ffffff; } #shineflip-pages.cover_front_content { position:absolute; z-index:1; overflow:hidden; whitewhite-space:nowrap; -ms-ur-lect:none; 失去了才懂得珍惜-webkit-ur-lect:none; -moz-ur-lect: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-ur-lect:none; -webkit-ur-lect:none; -moz-ur-lect:none; } #shineflip-pages.cover_background_back { position:absolute; z-index:0; } #shineflip-pagesction.pageflip { display:block; position:absolute; overflow:hidden; } #shineflip-pagesction.page{ //background-color:#fafafa; display:block; position:absolute; overflow:hidden; } #shineflip-pages-flipcontent,#shineflip-pagesction>div{ display:block; font-size:12px; position:absolute; overflow:hidden; width:100%; height:100%; } #shineflip-pages-flipcontent,#shineflip-pagesction>span{ display:block; font-size:12px; position:absolute; overflow:hidden; } #shineflip-pages-flipcontentp, #shineflip-pages-flipcontenth2, #shineflip-pagesctionp, #shineflip-pagesctionh2{ 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; }

以上就是本文的全部内容，希望大家喜欢。

本文发布于:2023-04-03 05:48:44，感谢您对本站的认可！

本文链接：https://www.wtabcd.cn/fanwen/zuowen/947cf65cd52e6c3e9984e4ead2b6a6f2.html

本文word下载地址：很酷的HTML5电子书翻页动画特效.doc

本文 PDF 下载地址：很酷的HTML5电子书翻页动画特效.pdf

上一篇：天蝎女两种长相超准，天蝎座女生颜值都特别高，是不是与他们比较精明有关？

下一篇：返回列表