html书本翻页效果实现,css3书本翻页特效
本文分享一款很酷的HTML5电子书翻页动画特效，这款HTML5翻页动画可以用鼠标拖动页面来模拟手动翻页的效果，也可以点击书页的边框来快速翻页。之前也分享过一款HTML5 3D书本翻页特效，3D视觉效果更加强烈。
在线演示地址如下：
http://demo.jb51.net/js/2016/html5-book-page/
实现的代码：
XML/HTML代码复制内容到剪贴板divid= shine flip divid= shine flip-pages canvasid= shine flip-canvas /canvasid= shine flip-page-mid-canvas /canvas section class= page divimgsrc= images/0。jpg width= 475 height= 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 divimgsrc= images/1。jpg width= 466 height= 463 style= float:right；上边距：9px //div/section section class= page divimgsrc= images/2。jpg width= 466 height= 463 style= float:left；边距-顶部：9px//div/section section class= page divimgsrc= images/3。jpg width= 466 height= 463 style= float:right；上边距：9px //div/section section class= page divimgsrc= images/4。jpg width= 466 height= 463 style= float:left；边距-顶部：9px//div/section section class= page divimgsrc= images/5。jpg width= 466 height= 463 style= float:right；上边距：9px //div/section section class= page style= background:URL(images/right _ PK。jpg divimgsrc= images/6。jpg width= 466 height= 463 style= float:left；上边距：9px //div/section section class= page divimgsrc= images/24。jpg width= 475 height= 482 //div span style= right:18px；img src= images/zh。png height= 482 //span/section/div/div CSS样式：
半铸钢钢性铸铁(Cast Semi-Steel)代码复制内容到剪贴板正文，h2，p { margin:0；填充：0;} body{ background:url(./images/cover . jpg’)不重复；-网络工具包-背景-大小：封面；蚊子背景-尺寸：封面；用作复合形式的末尾元音背景-尺寸：封面；背景-尺寸：封面；颜色：# 333;字体系列：Helvetica，无衬线；文本对齐：居中；} #shineflip{ /*background:url(./images/cover . jpg’)不重复；*/-o-background-size:1000%；-webkit-background-size:1000%；-moz-background-size:1000%；background-size:1000%；位置：绝对；} #闪亮翻页{/*背景色：# fafafa*/后台-重复：重复；位置：绝对；z指数：2;} # shine翻页部分。封面，封面，翻页部分。封面_背景{位置：绝对；溢出：隐藏；颜色：# ffffff} #闪亮翻页。cover _ front _ content { position:绝对；z指数：1;溢出：隐藏；白色-空白：nowrap-ms-用户选择：无；-网络工具包-用户选择：无；-moz-用户-选择：无；} #闪耀翻页。cover _ front _ back { position:绝对；z指数：0;} #闪耀翻页。封面_背景_内容{位置：绝对；z指数：1;溢出：隐藏；白色-空白：nowrap-ms-用户选择：无；-网络工具包-用户选择：无；-moz-用户-选择：无；} #闪耀翻页。封面_背景_背面{位置：绝对；z指数：0;} #闪耀翻页部分。翻页{显示：阻止；位置：绝对；溢出：隐藏；} # shine翻页section。page {//background-color:# fafafa；显示：块；位置：绝对；溢出：隐藏；} #shineflip-pages-flipcontent，# shine flip-pagessectiondiv { display:block；字体大小：12px位置：绝对；溢出：隐藏；宽度：100%;身高：100%;} #shineflip-pages-flipcontent，# shine flip-pagessectionspan { display:block；字体大小：12px位置：绝对；溢出：隐藏；} #shineflip-pages-flipcontentp，# shine flip-pages-flip content 2，#shineflip-pagessectionp，# shine flip-pages section H2 { line-height:1.4 em；文本对齐：对齐；} # shine翻转画布{ position:absolute；z指数：0;} # shine翻页-中间画布{ position:absolute；指针事件：无；z指数：0;} 以上就是本文的全部内容，希望大家喜欢。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。