• 售前

  • 售后

热门帖子
入门百科

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

[复制链接]
铁血_斩蛇 显示全部楼层 发表于 2021-10-26 13:35:06 |阅读模式 打印 上一主题 下一主题
本文分享一款很酷的HTML5电子书翻页动画殊效,这款HTML5翻页动画可以用鼠标拖动页面来模拟手动翻页的结果,也可以点击书页的边框来快速翻页。之前也分享过一款HTML5 3D书本翻页殊效,3D视觉结果更加猛烈。

在线演示地点如下:
http://demo.jb51.net/js/2016/html5-book-page/
实现的代码:
XML/HTML Code复制内容到剪贴板
       
  • <div id="shineflip">      
  •       <div id="shineflip-pages">      
  •           <canvas id="shineflip-canvas"></canvas>      
  •           <canvas id="shineflip-page-mid-canvas"></canvas>      
  •           <section class="page">      
  •               <div><img src="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)">      
  •               <div><img src="images/1.jpg" width="466" height="463" style="float:right;margin-top:9px;" /></div>      
  •           </section>      
  •           <section class="page">      
  •               <div><img src="images/2.jpg" width="466" height="463" style="float:left;margin-top:9px;" /></div>      
  •           </section>      
  •           <section class="page">      
  •               <div><img src="images/3.jpg" width="466" height="463" style="float:right;margin-top:9px;" /></div>      
  •           </section>      
  •           <section class="page">      
  •               <div><img src="images/4.jpg" width="466" height="463" style="float:left;margin-top:9px;" /></div>      
  •           </section>      
  •           <section class="page">      
  •               <div><img src="images/5.jpg" width="466" height="463" style="float:right;margin-top:9px;" /></div>      
  •           </section>      
  •           <section class="page" style="background:url(images/right_pk.jpg)">      
  •               <div><img src="images/6.jpg" width="466" height="463" style="float:left;margin-top:9px;" /></div>      
  •           </section>      
  •           <section class="page">      
  •               <div><img src="images/24.jpg" width="475" height="482" /></div>      
  •               <span style="right:18px;"><img src="images/zh.png" height="482" /></span>      
  •           </section>      
  •       </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-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;      
  • }   
以上就是本文的全部内容,希望大家喜欢。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作