首页  >  文章  >  web前端  >  html5仿AMD9官网酷炫的下载引导页动画特效的示例代码

html5仿AMD9官网酷炫的下载引导页动画特效的示例代码

黄舟
黄舟原创
2017-04-01 10:54:113106浏览

一直做后台的,但是最近对前端还是有点兴趣的,比较火的H5,于是用html5仿AMD9官网酷炫的下载引导页动画特效案例,下面分享给大家,当然本人只是初学者;大神莫喷哦;

效果图:

1373.jpg

具体完整代码如下:请不要使用记事本打开,最好用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=&#39;javascript:;&#39;><img src="img/logo.png" alt=xxx></a>
</div>
<div id=nav_box>
<ul>
<li>
<a href=&#39;javascript:;&#39; target=_blank clickid=guanwang_navigation_homepage>主页</a>
<li>
<a href=&#39;javascript:;&#39; target=_blank clickid=guanwang_navigation_productcenter>产品中心</a>
<li>
<a href=&#39;javascript:;&#39; target=_blank clickid=guanwang_navigation_customer>客服论坛</a>
<li>
<a href=&#39;javascript:;&#39; 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=&#39;javascript:;&#39;>立即下载</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]-->

以上是html5仿AMD9官网酷炫的下载引导页动画特效的示例代码的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn