登录  /  注册
首页 > web前端 > H5教程 > 正文

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

黄舟
发布: 2017-04-01 10:54:11
原创
2914人浏览过

一直做后台的,但是最近对前端还是有点兴趣的,比较火的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中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号