html5仿AMD9官网酷炫的下载引导页动画特效的示例代码-木庄网络博客

本文摘自PHP中文网，作者黄舟，侵删。

一直做后台的，但是最近对前端还是有点兴趣的，比较火的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]-->