少了你的风景,我没有美丽的人生。天气真好!一起去郊游吧,拥抱大自然,呼吸清新的空气,享受悠闲和温馨。
本文分享一款很酷的HTML5电子书翻页动画特效,这款HTML5翻页动画可以用鼠标拖动页面来模拟手动翻页的效果,也可以点击书页的边框来快速翻页。之前也分享过一款HTML5 3D书本翻页特效,3D视觉效果更加强烈。
在线演示地址如下:
http://demo.haodaima.com/js/2016/html5-book-page/
实现的代码:
XML/HTML Code复制内容到剪贴板
- <divid="shineflip">
- <divid="shineflip-pages">
- <canvasid="shineflip-canvas"></canvas>
- <canvasid="shineflip-page-mid-canvas"></canvas>
- <sectionclass="page">
- <div><imgsrc="images/0.jpg"width="475"height="482"/></div>
- <spanstyle="left:18px;"><imgsrc="images/zh.png"height="482"/></span>
- </section>
- <sectionclass="page"style="background:url(images/left_pk.jpg)">
- <div><imgsrc="images/1.jpg"width="466"height="463"style="float:right;margin-top:9px;"/></div>
- </section>
- <sectionclass="page">
- <div><imgsrc="images/2.jpg"width="466"height="463"style="float:left;margin-top:9px;"/></div>
- </section>
- <sectionclass="page">
- <div><imgsrc="images/3.jpg"width="466"height="463"style="float:right;margin-top:9px;"/></div>
- </section>
- <sectionclass="page">
- <div><imgsrc="images/4.jpg"width="466"height="463"style="float:left;margin-top:9px;"/></div>
- </section>
- <sectionclass="page">
- <div><imgsrc="images/5.jpg"width="466"height="463"style="float:right;margin-top:9px;"/></div>
- </section>
- <sectionclass="page"style="background:url(images/right_pk.jpg)">
- <div><imgsrc="images/6.jpg"width="466"height="463"style="float:left;margin-top:9px;"/></div>
- </section>
- <sectionclass="page">
- <div><imgsrc="images/24.jpg"width="475"height="482"/></div>
- <spanstyle="right:18px;"><imgsrc="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-pagessection.cover_front,#shineflip-pagessection.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-pagessection.pageflip
- {
- display:block;
- position:absolute;
- overflow:hidden;
- }
- #shineflip-pagessection.page{
- //background-color:#fafafa;
- display:block;
- position:absolute;
- overflow:hidden;
- }
- #shineflip-pages-flipcontent,#shineflip-pagessection>div{
- display:block;
- font-size:12px;
- position:absolute;
- overflow:hidden;
- width:100%;
- height:100%;
- }
- #shineflip-pages-flipcontent,#shineflip-pagessection>span{
- display:block;
- font-size:12px;
- position:absolute;
- overflow:hidden;
- }
- #shineflip-pages-flipcontentp,
- #shineflip-pages-flipcontenth2,
- #shineflip-pagessectionp,
- #shineflip-pagessectionh2{
- 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;
- }
以上就是本文的全部内容,希望大家喜欢。