站長(zhǎng)資訊網(wǎng)一直做后臺(tái)的，但是最近對(duì)前端還是有點(diǎn)興趣的，比較火的H5，于是用html5仿AMD9官網(wǎng)酷炫的下載引導(dǎo)頁(yè)動(dòng)畫(huà)特效案例，下面分享給大家，當(dāng)然本人只是初學(xué)者；大神莫噴哦；
效果圖：
具體完整代碼如下：請(qǐng)不要使用記事本打開(kāi)，最好用notpad++編寫(xiě)代碼！！
<!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>主頁(yè)</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陽(yáng)臺(tái)</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)在開(kāi)始，你就會(huì)感覺(jué)到它與以往是如此不同。全新的界面體驗(yà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>高速引擎可以帶你穿越時(shí)空</h2> <p>我們對(duì)速度的渴望從未停止，一起來(lái)體驗(yàn)速度超頻的感覺(jué)。它的技術(shù)服務(wù)會(huì)更加穩(wěn)定，占用更少的資源提供更高的速度支持，這一切只源于我們對(duì)技術(shù)的無(wú)盡追求。</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>它以生動(dòng)的方式呈現(xiàn)更多內(nèi)容，讓你在體驗(yàn)極速的同時(shí)，擁有更多選擇。熱門(mén)游戲，熱辣直播，高清美圖，我們準(zhǔn)備好了一切，就等你來(lá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>還有另一個(gè)自己在這里等你</h2> <p>當(dāng)你使用AMD的同時(shí)，也許另一個(gè)人也和你一樣，在下載、在觀看同樣的東西。這些只是開(kāi)始，新一代AMD使用越久，越能發(fā)現(xiàn)它的創(chuàng)新和誠(ché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]-->
