• 技术文章 >web前端 >H5教程

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

    2016-05-16 15:45:48原创2108

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

    在线演示地址如下：

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

    实现的代码：

    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. }
    6. body {
    7. background: url("../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-family: Helvetica, sans-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. position: absolute;
    23. }
    25. #shineflip-pages
    26. {
    27. /* background-color:#fafafa;*/
    28. background-repeat: repeat;
    29. position: absolute;
    30. z-index: 2;
    31. }
    33. #shineflip-pages section.cover_front, #shineflip-pages section.cover_background{
    34. position: absolute;
    35. overflow: hidden;
    36. color: #ffffff;
    37. }
    39. #shineflip-pages .cover_front_content
    40. {
    41. position: absolute;
    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. }
    50. #shineflip-pages .cover_front_back
    51. {
    52. position: absolute;
    53. z-index: 0;
    54. }
    56. #shineflip-pages .cover_background_content
    57. {
    58. position: absolute;
    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. }
    67. #shineflip-pages .cover_background_back
    68. {
    69. position: absolute;
    70. z-index: 0;
    71. }
    73. #shineflip-pages section.pageflip
    74. {
    75. display: block;
    76. position: absolute;
    77. overflow: hidden;
    78. }
    80. #shineflip-pages section.page {
    81. //background-color: #fafafa;
    82. display: block;
    83. position: absolute;
    84. overflow: hidden;
    85. }
    86. #shineflip-pages-flipcontent,#shineflip-pages section>div {
    87. display: block;
    88. font-size: 12px;
    89. position: absolute;
    90. overflow: hidden;
    91. width:100%;
    92. height:100%;
    93. }
    94. #shineflip-pages-flipcontent,#shineflip-pages section>span {
    95. display: block;
    96. font-size: 12px;
    97. position: absolute;
    98. overflow: hidden;
    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-align: justify;
    106. }
    108. #shineflip-canvas {
    109. position: absolute;
    110. z-index: 0;
    111. }
    113. #shineflip-page-mid-canvas {
    114. position: absolute;
    115. pointer-events: none;
    116. z-index: 0;
    117. }

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

    声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。
    专题推荐：HTML5 电子书 翻页
    上一篇：浅谈基于HTML5的在线视频播放方案_html5教程技巧 下一篇：自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • 在HTML5 Canvas中放入图片和保存为图片的方法_html5教程技巧• 小强的HTML5移动开发之路（16）——神奇的拖放功能• 开发人员所需要知道的HTML5性能分析面面观_html5教程技巧• H5你真的了解吗？（绝对干货）• HTML 5标签、属性、事件及兼容性速查表
    1/1

    PHP中文网

    首页 首页课程 课程文章文章问答 问答博客博客词典 词典手册 手册资源 资源搜索 搜索APP下载 APP下载