站長資訊網(wǎng)一直做后臺的，但是最近對前端還是有點興趣的，比較火的H5，于是用html5仿AMD9官網(wǎng)酷炫的下載引導頁動畫特效案例，下面分享給大家，當然本人只是初學者；大神莫噴哦；
效果圖：
具體完整代碼如下：請不要使用記事本打開，最好用notpad++編寫代碼?。?/p>
<!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>產(chǎn)品中心</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將呈現(xiàn)更多精彩</h2> <p>從現(xiàn)在開始，你就會感覺到它與以往是如此不同。全新的界面體驗，高速的引擎支持，豐富的內(nèi)容推薦，這一切，都讓你的生活更加精彩。</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>我們對速度的渴望從未停止，一起來體驗速度超頻的感覺。它的技術(shù)服務會更加穩(wěn)定，占用更少的資源提供更高的速度支持，這一切只源于我們對技術(shù)的無盡追求。</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>與你一起發(fā)現(xiàn)更多精彩資源</h2> <p>它以生動的方式呈現(xiàn)更多內(nèi)容，讓你在體驗極速的同時，擁有更多選擇。熱門游戲，熱辣直播，高清美圖，我們準備好了一切，就等你來探索</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使用越久，越能發(fā)現(xiàn)它的創(chuàng)新和誠心。</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 版權(quán)所有</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]-->
