如何制作HTML5电子书翻页动画特效
如何制作HTML5电子书翻页动画特效，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
创新互联始终坚持【策划先行，效果至上】的经营理念，通过多达10多年累计超上千家客户的网站建设总结了一套系统有效的全网营销解决方案，现已广泛运用于各行各业的客户，其中包括：成都混凝土搅拌罐等企业，备受客户赞赏。
这款HTML5翻页动画可以用鼠标拖动页面来模拟手动翻页的效果，也可以点击书页的边框来快速翻页。
在线演示地址如下：
http://demo.jb51.net/js/2016/html5-book-page/
实现的代码：
XML/HTML Code复制内容到剪贴板
CSS样式：
CSS Code复制内容到剪贴板
body, h3, 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 h3,
#shineflip-pages section p,
#shineflip-pages section h3 {
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;
}
关于如何制作HTML5电子书翻页动画特效问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注创新互联行业资讯频道了解更多相关知识。
网页标题：如何制作HTML5电子书翻页动画特效
文章地址：
http://ybzwz.com/article/gjjhoo.html
