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