如何实现一个HTML5电子杂志翻书特效

发布时间:2021-03-03 10:58:45 作者:清风
来源:亿速云 阅读:385

这篇文章主要为大家展示了如何实现一个HTML5电子杂志翻书特效,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带大家一起来研究并学习一下“如何实现一个HTML5电子杂志翻书特效”这篇文章吧。

html有什么特点

1、简易性:超级文本标记语言版本升级采用超集方式,从而更加灵活方便,适合初学前端开发者使用。 2、可扩展性:超级文本标记语言的广泛应用带来了加强功能,增加标识符等要求,超级文本标记语言采取子类元素的方式,为系统扩展带来保证。  3、平台无关性:超级文本标记语言能够在广泛的平台上使用,这也是万维网盛行的一个原因。 4、通用性:HTML是网络的通用语言,它允许网页制作人建立文本与图片相结合的复杂页面,这些页面可以被网上任何其他人浏览到,无论使用的是什么类型的电脑或浏览器。

undefinedundefinedundefined

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"><h2>何问起尘封记忆的相册</h2></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="https://cache.yisu.com/upload/information/20200318/91/17192.jpg" width="475" height="482" /></p>
<span style="left:18px;"><img src="https://cache.yisu.com/upload/information/20200318/91/17193.jpg" height="482" /></span> 
</section>
<section class="page" style="background:url(images/left_pk.jpg)">
<p><img src="https://cache.yisu.com/upload/information/20200318/91/17194.jpg" width="466" height="463" style="float:right;margin-top:9px;" /></p>
</section>
<section class="page">
<p><img src="https://cache.yisu.com/upload/information/20200318/91/17195.jpg" width="466" height="463" style="float:left;margin-top:9px;" /></p>
</section>
<section class="page">
<p><img src="https://cache.yisu.com/upload/information/20200318/91/17196.jpg" width="466" height="463" style="float:right;margin-top:9px;" /></p>
</section>
<section class="page">
<p><img src="https://cache.yisu.com/upload/information/20200318/91/17197.jpg" width="466" height="463" style="float:left;margin-top:9px;" /></p>
</section>
<section class="page">
<p><img src="https://cache.yisu.com/upload/information/20200318/91/17198.jpg" width="466" height="463" style="float:right;margin-top:9px;" /></p>
</section>
<section class="page" style="background:url(images/right_pk.jpg)">
<p><img src="https://cache.yisu.com/upload/information/20200318/91/17199.jpg" width="466" height="463" style="float:left;margin-top:9px;" /></p>
</section>
<section class="page">
<p><img src="https://cache.yisu.com/upload/information/20200318/91/17200.jpg" width="475" height="482" /></p>
<span style="right:18px;"><img src="https://cache.yisu.com/upload/information/20200318/91/17193.jpg" height="482" /></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电子杂志翻书特效”的内容,如果改文章对你有所帮助并觉得写得不错,劳请分享给你的好友一起学习新知识,若想了解更多相关知识内容,请多多关注亿速云行业资讯频道。

推荐阅读:
  1. html5实现飘落动画特效
  2. 使用JavaScript怎么实现一个烟花特效

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

html5

上一篇:html5中web存储的示例分析

下一篇:HTML5如何制作Banner

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》