当前位置： 首页 - 科技 - 知识百科 - 正文

很酷的HTML5电子书翻页动画特效_html5教程技巧

来源：动视网 责编：小采 时间：2020-11-27 15:19:44

很酷的HTML5电子书翻页动画特效_html5教程技巧

很酷的HTML5电子书翻页动画特效_html5教程技巧:本文分享一款很酷的HTML5电子书翻页动画特效，这款HTML5翻页动画可以用鼠标拖动页面来模拟手动翻页的效果，也可以点击书页的边框来快速翻页。之前也分享过一款HTML5 3D书本翻页特效，3D视觉效果更加强烈。 在线演示地址如下： http://demo.jb51

推荐度：

点击下载本文 文档为doc格式

导读很酷的HTML5电子书翻页动画特效_html5教程技巧:本文分享一款很酷的HTML5电子书翻页动画特效，这款HTML5翻页动画可以用鼠标拖动页面来模拟手动翻页的效果，也可以点击书页的边框来快速翻页。之前也分享过一款HTML5 3D书本翻页特效，3D视觉效果更加强烈。 在线演示地址如下： http://demo.jb51

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

在线演示地址如下：

http://demo.jb51.net/js/2016/html5-book-page/

实现的代码：

XML/HTML Code复制内容到剪贴板


 
 
 
 
 
 
  
 
  
 
 
 
 
 
 
 
  
 
  
 
 
 
 
 
 
 
  
 
 
 
 
 
 
 
  
 
 
 
 
 
 
 
  
 
 
 
 
 
 
 
  
 
 
 
 
 
 
 
  
 
 
 
 
 
 
 
  
 
 
 
 
 
 
 
  
 
  
 
 

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-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; 
 
}