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


Posted in HTML / CSS onFebruary 25, 2016

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

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

在线演示地址如下:

实现的代码:

XML/HTML Code复制内容到剪贴板
  1. <div id="shineflip">  
  2.       <div id="shineflip-pages">  
  3.           <canvas id="shineflip-canvas"></canvas>  
  4.           <canvas id="shineflip-page-mid-canvas"></canvas>  
  5.           <section class="page">  
  6.               <div><img src="images/0.jpg" width="475" height="482" /></div>  
  7.               <span style="left:18px;"><img src="images/zh.png" height="482" /></span>  
  8.           </section>  
  9.           <section class="page" style="background:url(images/left_pk.jpg)">  
  10.               <div><img src="images/1.jpg" width="466" height="463" style="float:right;margin-top:9px;" /></div>  
  11.           </section>  
  12.           <section class="page">  
  13.               <div><img src="images/2.jpg" width="466" height="463" style="float:left;margin-top:9px;" /></div>  
  14.           </section>  
  15.           <section class="page">  
  16.               <div><img src="images/3.jpg" width="466" height="463" style="float:right;margin-top:9px;" /></div>  
  17.           </section>  
  18.           <section class="page">  
  19.               <div><img src="images/4.jpg" width="466" height="463" style="float:left;margin-top:9px;" /></div>  
  20.           </section>  
  21.           <section class="page">  
  22.               <div><img src="images/5.jpg" width="466" height="463" style="float:right;margin-top:9px;" /></div>  
  23.           </section>  
  24.           <section class="page" style="background:url(images/right_pk.jpg)">  
  25.               <div><img src="images/6.jpg" width="466" height="463" style="float:left;margin-top:9px;" /></div>  
  26.           </section>  
  27.           <section class="page">  
  28.               <div><img src="images/24.jpg" width="475" height="482" /></div>  
  29.               <span style="right:18px;"><img src="images/zh.png" height="482" /></span>  
  30.           </section>  
  31.       </div>  
  32.   </div>  

CSS样式:

CSS Code复制内容到剪贴板
  1. body, h2, p {   
  2.  margin: 0;   
  3.  padding: 0;   
  4. }   
  5.   
  6. body {   
  7.  backgroundurl("../images/cover.jpg"no-repeat;   
  8.  -webkit-background-size: cover;   
  9.     -moz-background-size: cover;   
  10.     -o-background-size: cover;   
  11.     background-size: cover;   
  12.  color#333;   
  13.  font-familyHelveticasans-serif;   
  14.  text-align:center;   
  15. }   
  16. #shineflip {   
  17.  /*background: url("../images/cover.jpg") no-repeat;*/  
  18.  -o-background-size: 100% 100%;    
  19.  -webkit-background-size: 100% 100%;   
  20.  -moz-background-size: 100% 100%;   
  21.  background-size: 100% 100%;   
  22.  positionabsolute;   
  23. }   
  24.   
  25. #shineflip-pages    
  26. {   
  27. /*    background-color:#fafafa;*/  
  28.     background-repeatrepeat;   
  29.     positionabsolute;   
  30.     z-index: 2;   
  31. }   
  32.   
  33. #shineflip-pages section.cover_front, #shineflip-pages section.cover_background{   
  34.  positionabsolute;   
  35.  overflowhidden;   
  36.  color#ffffff;   
  37. }   
  38.   
  39. #shineflip-pages .cover_front_content   
  40. {   
  41.  positionabsolute;    
  42.  z-index: 1;   
  43.  overflow:hidden;   
  44.  whitewhite-space:nowrap;   
  45.  -ms-user-select:none;   
  46.  -webkit-user-select:none;   
  47.  -moz-user-select:none;   
  48. }   
  49.   
  50. #shineflip-pages .cover_front_back   
  51. {   
  52.  positionabsolute;    
  53.  z-index: 0;   
  54. }   
  55.   
  56. #shineflip-pages .cover_background_content   
  57. {   
  58.  positionabsolute;    
  59.  z-index: 1;   
  60.  overflow:hidden;   
  61.  whitewhite-space:nowrap;   
  62.  -ms-user-select:none;   
  63.  -webkit-user-select:none;   
  64.  -moz-user-select:none;   
  65. }   
  66.   
  67. #shineflip-pages .cover_background_back   
  68. {   
  69.  positionabsolute;    
  70.  z-index: 0;   
  71. }   
  72.   
  73. #shineflip-pages section.pageflip    
  74. {   
  75.  displayblock;   
  76.  positionabsolute;   
  77.  overflowhidden;   
  78. }   
  79.   
  80. #shineflip-pages section.page {   
  81.     //background-color#fafafa;   
  82.  displayblock;   
  83.  positionabsolute;   
  84.  overflowhidden;   
  85. }   
  86.  #shineflip-pages-flipcontent,#shineflip-pages section>div {   
  87.   displayblock;   
  88.   font-size12px;   
  89.   positionabsolute;   
  90.   overflowhidden;   
  91.   width:100%;   
  92.   height:100%;   
  93.  }   
  94.  #shineflip-pages-flipcontent,#shineflip-pages section>span {   
  95.   displayblock;   
  96.   font-size12px;   
  97.   positionabsolute;   
  98.   overflowhidden;   
  99.  }   
  100.  #shineflip-pages-flipcontent p,   
  101.  #shineflip-pages-flipcontent h2,   
  102.  #shineflip-pages section p,   
  103.  #shineflip-pages section h2 {   
  104.   line-height: 1.4em;   
  105.   text-alignjustify;   
  106.  }   
  107.   
  108. #shineflip-canvas {   
  109.  positionabsolute;   
  110.  z-index: 0;   
  111. }   
  112.   
  113. #shineflip-page-mid-canvas {   
  114.  positionabsolute;   
  115.  pointer-events: none;   
  116.  z-index: 0;   
  117. }   

以上就是本文的全部内容,希望大家喜欢。

HTML / CSS 相关文章推荐
css3气泡 css3关键帧动画创建的动态通知气泡
Feb 26 HTML / CSS
详解HTML5表单新增属性
Dec 21 HTML / CSS
详解Canvas 实现炫丽的粒子运动效果(粒子生成文字)
Feb 01 HTML / CSS
HTML5 Canvas如何实现纹理填充与描边(Fill And Stroke)
Jul 15 HTML / CSS
HTML5在canvas中绘制复杂形状附效果截图
Jun 23 HTML / CSS
html5使用canvas画三角形
Dec 15 HTML / CSS
推荐WEB开发者最佳HTML5和CSS3代码生成器
Nov 24 HTML / CSS
详解HTML5中表单验证的8种方法介绍
Dec 19 HTML / CSS
原生 JS+CSS+HTML 实现时序图的方法
Jul 31 HTML / CSS
HTML5图片层叠的实现示例
Jul 07 HTML / CSS
使用layui实现左侧菜单栏及动态操作tab项的方法
Nov 10 HTML / CSS
html form表单基础入门案例讲解
Jul 21 HTML / CSS
推荐10个HTML5响应式框架
Feb 25 #HTML / CSS
整理HTML5中支持的URL编码与字符编码
Feb 23 #HTML / CSS
使用HTML5在网页中嵌入音频和视频播放的基本方法
Feb 22 #HTML / CSS
浅析HTML5的WebSocket与服务器推送事件
Feb 19 #HTML / CSS
解析HTML5的存储功能和web SQL的相关操作方法
Feb 19 #HTML / CSS
在HTML5中使用MathML数学公式的简单讲解
Feb 19 #HTML / CSS
使用HTML5进行SVG矢量图形绘制的入门教程
Feb 19 #HTML / CSS
You might like
英雄试炼之肉山谷—引领RPG新潮流
2020/04/20 DOTA
PHP设计模式之调解者模式的深入解析
2013/06/13 PHP
PHP获取昨天、今天及明天日期的方法
2016/02/03 PHP
日期函数扩展类Ver0.1.1
2006/09/07 Javascript
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
2010/03/15 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
2015/08/25 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
2020/05/16 Javascript
AngularJS 过滤与排序详解及实例代码
2016/09/14 Javascript
ros::spin() 和 ros::spinOnce()函数的区别及详解
2016/10/01 Javascript
javascript 判断是否是微信浏览器的方法
2016/10/09 Javascript
js实现移动端编辑添加地址【模仿京东】
2017/04/28 Javascript
JavaScript实现三级联动菜单效果
2017/08/16 Javascript
温故知新——JavaScript中的字符串连接问题最全总结(推荐)
2017/08/21 Javascript
详解基于Angular4+ server render(服务端渲染)开发教程
2017/08/28 Javascript
koa2 从入门到精通(小结)
2019/07/23 Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
2020/03/03 Javascript
vue下canvas裁剪图片实例讲解
2020/04/16 Javascript
vue data有值,但是页面{{}} 取不到值的解决
2020/11/09 Javascript
vue解决跨域问题(推荐)
2020/11/10 Javascript
[03:26]回顾2015国际邀请赛中国区预选赛
2015/06/09 DOTA
linux环境下安装pyramid和新建项目的步骤
2013/11/27 Python
深度剖析使用python抓取网页正文的源码
2014/06/11 Python
Python监控主机是否存活并以邮件报警
2015/09/22 Python
matplotlib 纵坐标轴显示数据值的实例
2018/05/25 Python
使用Python制作简单的小程序IP查看器功能
2019/04/16 Python
Python安装selenium包详细过程
2019/07/23 Python
python实现跨excel sheet复制代码实例
2020/03/03 Python
如何用Django处理gzip数据流
2021/01/29 Python
用HTML5制作一个简单的桌球游戏的教程
2015/05/12 HTML / CSS
临床医学应届生求职信
2013/11/06 职场文书
教师竞聘上岗演讲稿
2014/09/03 职场文书
2015入党自传书范文
2015/06/26 职场文书
大学学生会竞选稿
2015/11/19 职场文书
2016重阳节红领巾广播稿
2015/12/18 职场文书
2016年心理学教育培训学习心得体会
2016/01/12 职场文书
SpringBoot+Redis实现布隆过滤器的示例代码
2022/03/17 Java/Android