Rumah >hujung hadapan web >Tutorial H5 >html5仿AMD9官网酷炫的下载引导页动画特效的示例代码
html5仿AMD9官网酷炫的下载引导页动画特效的示例代码
- 黄舟asal
- 2017-04-01 10:54:113209semak imbas
一直做后台的，但是最近对前端还是有点兴趣的，比较火的H5，于是用html5仿AMD9官网酷炫的下载引导页动画特效案例，下面分享给大家，当然本人只是初学者；大神莫喷哦；
效果图：
具体完整代码如下：请不要使用记事本打开，最好用notpad++编写代码！！
<!DOCTYPE html>
<html>
<meta charset=UTF-8>
<meta http-equiv=X-UA-Compatible content="IE=edge">
<link rel="shortcut icon" href="/favicon.ico">
<link rel=bookmark href="/favicon.ico" type=image/x-icon>
<title>高仿 -- AMD9 : 精彩,一下就有</title>
<link rel=stylesheet href="css/style.css">
<div id=wrap>
<div>
<div>
<div class="head clearfix">
<div>
<h1>AMD9</h1>
<a href='javascript:;'><img src="img/logo.png" alt=xxx></a>
</div>
<div id=nav_box>
<ul>
<li>
<a href='javascript:;' target=_blank clickid=guanwang_navigation_homepage>主页</a>
<li>
<a href='javascript:;' target=_blank clickid=guanwang_navigation_productcenter>产品中心</a>
<li>
<a href='javascript:;' target=_blank clickid=guanwang_navigation_customer>客服论坛</a>
<li>
<a href='javascript:;' target=_blank clickid=guanwang_navigation_yangtai>AMD阳台</a>
</ul><span></span></div>
</div>
</div>
<div id=page_wp>
<div class="page page_1"><span class="page_bg scale_box"></span>
<div><img src="" alt=""></div>
<div class="txt_box scale_box">
<h2>新一代AMD将呈现更多精彩</h2>
<p>从现在开始，你就会感觉到它与以往是如此不同。全新的界面体验，高速的引擎支持，丰富的内容推荐，这一切，都让你的生活更加精彩。</div>
</div>
<div class="page page_2"><span class="page_bg scale_box"></span>
<div><img src="" alt=""></div>
<div class="txt_box scale_box">
<h2>高速引擎可以带你穿越时空</h2>
<p>我们对速度的渴望从未停止，一起来体验速度超频的感觉。它的技术服务会更加稳定，占用更少的资源提供更高的速度支持，这一切只源于我们对技术的无尽追求。</div>
</div>
<div class="page page_3"><span class="page_bg scale_box"></span>
<div><img src="" alt=""></div>
<div class="txt_box scale_box">
<h2>与你一起发现更多精彩资源</h2>
<p>它以生动的方式呈现更多内容，让你在体验极速的同时，拥有更多选择。热门游戏，热辣直播，高清美图，我们准备好了一切，就等你来探索</div>
</div>
<div class="page page_4"><span class="page_bg scale_box"></span>
<div><img src="" alt=""></div>
<div class="light_wp scale_box"><span><i></i> <i></i> <i></i> <i></i> <i></i></span></div><span class="meteor_box scale_box"></span>
<div class="txt_box scale_box">
<h2>还有另一个自己在这里等你</h2>
<p>当你使用AMD的同时，也许另一个人也和你一样，在下载、在观看同样的东西。这些只是开始，新一代AMD使用越久，越能发现它的创新和诚心。</div>
</div>
</div>
<div class="star_wp scale_box" id=star_wp><span></span> <span></span></div><canvas id=canvas></canvas>
<div class="btns_wp scale_box">
<a class="btn_download JS-btn-download" href='javascript:;'>立即下载</a>
</div>
<div id=btn_control>
<a href=javascript:;></a>
<a href=javascript:;></a>
<a href=javascript:;></a>
<a href=javascript:;></a>
</div>
<div>
<div>
<p>© XXXX-2016 XXXX 版权所有</div>
</div>
</div>
</div>
<script src="./js/vendors.js"></script>
<script src="./js/index.js"></script>
<!--[if IE 6]>
<script type="text/javascript" src="http://static.webgame.kanimg.com/com/DD_PNG_min.js"></script>
<script type="text/javascript">
var links=document.getElementsByTagName("a");
for(var i=0,l=links.length;i<l;i++){
links[i].setAttribute("hideFocus",true);
}
</script>
<![endif]-->Atas ialah kandungan terperinci html5仿AMD9官网酷炫的下载引导页动画特效的示例代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Html5的Reset和Base样式结合的示例代码Artikel seterusnya：HTML5网页版黑白子五子棋游戏的示例代码分享