分享一个HTML5电子杂志翻书特效代码

百变鹏仔 2个月前 (10-18) #H5教程

文章标签电子杂志

HTML5电子杂志翻书动画特效,把你或者你的谁的照片制作一本相册。

<!DOCTYPE html><html><head><!-- 效果：http://hovertree.com/texiao/html5/37/ --><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>HTML5电子杂志翻书动画特效 - 何问起</title><base target="_blank" /><link type="text/css" href="http://hovertree.com/texiao/html5/37/css/main.css" rel="stylesheet" media="screen" /><style>.hovertreeinfo{text-align:center;}</style>	</head><body><p class="hovertreeinfo"><h1>何问起尘封记忆的相册</h1></p><p id="shineflip"><p id="shineflip-pages"><canvas id="shineflip-canvas"></canvas><canvas id="shineflip-page-mid-canvas"></canvas><section class="page"><p><img  src="http://hovertree.com/texiao/html5/37/images/0.jpg"    style="max-width:90%"  style="max-width:90%" / alt="分享一个HTML5电子杂志翻书特效代码" ></p><span style="left:18px;"><img  src="http://hovertree.com/texiao/html5/37/images/zh.png"    style="max-width:90%" / alt="分享一个HTML5电子杂志翻书特效代码" ></span> </section><section class="page" style="background:url(images/left_pk.jpg)"><p><img  src="http://hovertree.com/texiao/html5/37/images/1.jpg"    style="max-width:90%"  style="max-width:90%" style="float:right;margin-top:9px;" / alt="分享一个HTML5电子杂志翻书特效代码" ></p></section><section class="page"><p><img  src="http://hovertree.com/texiao/html5/37/images/2.jpg"    style="max-width:90%"  style="max-width:90%" style="float:left;margin-top:9px;" / alt="分享一个HTML5电子杂志翻书特效代码" ></p></section><section class="page"><p><img  src="http://hovertree.com/texiao/html5/37/images/3.jpg"    style="max-width:90%"  style="max-width:90%" style="float:right;margin-top:9px;" / alt="分享一个HTML5电子杂志翻书特效代码" ></p></section><section class="page"><p><img  src="http://hovertree.com/texiao/html5/37/images/4.jpg"    style="max-width:90%"  style="max-width:90%" style="float:left;margin-top:9px;" / alt="分享一个HTML5电子杂志翻书特效代码" ></p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p></section><section class="page"><p><img  src="http://hovertree.com/texiao/html5/37/images/5.jpg"    style="max-width:90%"  style="max-width:90%" style="float:right;margin-top:9px;" / alt="分享一个HTML5电子杂志翻书特效代码" ></p></section><section class="page" style="background:url(images/right_pk.jpg)"><p><img  src="http://hovertree.com/texiao/html5/37/images/6.jpg"    style="max-width:90%"  style="max-width:90%" style="float:left;margin-top:9px;" / alt="分享一个HTML5电子杂志翻书特效代码" ></p></section><section class="page"><p><img  src="http://hovertree.com/texiao/html5/37/images/24.jpg"    style="max-width:90%"  style="max-width:90%" / alt="分享一个HTML5电子杂志翻书特效代码" ></p><span style="right:18px;"><img  src="http://hovertree.com/texiao/html5/37/images/zh.png"    style="max-width:90%" / alt="分享一个HTML5电子杂志翻书特效代码" ></span> </section></p></p><script type="text/javascript" src="http://hovertree.com/texiao/html5/37/js/shineflip_min.js"></script><script type="text/javascript">var shineFlip = new ShineFlip({// autoFitScreen: true,width: 950,height: 482,page_width: 475,page_height: 482});</script><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p><br><p>来源：<a href="http://hovertree.com/" target="_blank">何问起</a> <a href="http://hovertree.com/texiao/">特效库</a> <a href="http://hovertree.com/h/bjaf/nijk183i.htm">代码下载</a> </p></body></html

文章推荐

分享一个HTML5电子杂志翻书特效代码

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集