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

2020-03-24 18:07:03

字体：大中小

来源：转载

供稿：网友

本文分享一款很酷的HTML5电子书翻页动画特效，这款HTML5翻页动画可以用鼠标拖动页面来模拟手动翻页的效果，也可以点击书页的边框来快速翻页。之前也分享过一款HTML5 3D书本翻页特效，3D视觉效果更加强烈。在线演示地址如下：http://demo.phpstudy.net/js/2016/html5-book-page/实现的代码：XML/HTML Code复制内容到剪贴板
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教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：HTML代码制作滚动文字

下一篇：HTML中头部标签的用法