<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
// function is_weixn(){
// var ua = navigator.userAgent.toLowerCase();
// if(ua.match(/MicroMessenger/i)=='micromessenger') {
// console.log('是微信环境');
// } else {
// window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx2d47cd8ea102b435&redirect_uri=https%3a%2f%2fwww.jiandoukeji.com%2fh5%2f2018%2fala%2faudi%2fvorsprung%2findex.html&response_type=code&scope=SCOPE&state=STATE#wechat_redirect';
// }
// }
// is_weixn();
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta name="format-detection" content="telephone=no">
<title>别不相信，你是一颗星星</title>
<link rel="stylesheet" type="text/css" href="css/animate.css">
<link rel="stylesheet" type="text/css" href="css/main.css?v=1.8">
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script src="js/libs/jquery-3.2.1.min.js"></script>
<script src="js/libs/imagesLoader.min.js"></script>
<script src="js/libs/iscroll-probe.js"></script>
<script src="js/libs/howler.min.js"></script>
<script type="text/javascript">
//获取url参数
function getQueryString(name) {
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
var r = window.location.search.substr(1).match(reg);
if (r != null) {
return unescape(r[2]);
}
return null;
}
</script>
</head>
<body>
<!-- loading BEGIN-->
<!--
loading页 loading中的图片
尽量使用<img />标签插入
或直接写在元素的style里面
或写在head标签中的style样式里
-->
<div class="loadPage" style="width: 100%; height: 100%;">
<div class="ldbg">
<img src="images/cbg.png" alt="">
<p></p>
</div>
</div>
<!-- loading END -->
<!-- global start -->
<div class="container">
<!-- <div class="console"></div> -->
<div class="last"></div>
<div class="shareBtn"></div>
<div class="replayBtn"></div>
<div id="wrapper">
<div id="scroller"></div>
<div class="slideTip">
<p>缓缓向左 滑动屏幕</p>
</div>
</div>
<!-- 这是demo用的类名和id 后续要改 -->
<div class="gesture">
<div class="starBtn pulse animated infinite"></div>
</div>
<div class="starfield" id="starfield1">
<div id="stars1">
<!-- 出生 -->
<div class="night"></div>
<div class="tree fs"></div>
<div class="cloud1 fs"></div>
<div class="grass1 fs"></div>
<div class="house fs"></div>
<div class="grass2 fs"></div>
<div class="p1 fs"></div>
<!-- 学走路 -->
<div class="cloud2"></div>
<div class="stone"></div>
<div class="walking"></div>
<div class="tree2"></div>
<div class="house2"></div>
<!-- 孩子玩耍 -->
<div class="huati"></div>
<div class="boy"></div>
<!-- 青年 -->
<div class="tree3"></div>
<div class="band"></div>
<!-- 进入职场 -->
<div class="work"></div>
<div class="wall"></div>
<!-- 结婚 -->
<div class="tree4"></div>
<div class="marriage"></div>
<!-- 生孩子 -->
<div class="childbirth"></div>
<div class="autumn"></div>
<!-- 事业有成 -->
<div class="work2"></div>
<div class="table"></div>
<!-- 子女结婚 -->
<div class="newman"></div>
<div class="grand"></div>
<!-- 遛鸟 -->
<div class="tree5 ls"></div>
<div class="house3 ls"></div>
<!-- 带孙女玩 -->
<div class="grandpa"></div>
<!-- 变老逝去 -->
<div class="tree6 ls"></div>
<div class="night2"></div>
<div class="text text1">
<p>在这个一片蝉鸣的季节</p>
<p>我来到了这个世界</p>
</div>
<div class="text text2">
<p>
<p>1岁，爸爸妈妈教我走路</p>
<p>一步一步，步伐不太稳却坚定不移</p>
<p>也许，未来就像走路一样</p>
<p>都是独自探索世界的旅程</p>
</p>
</div>
<div class="text text3">
<p>童年的快乐很简单</p>
<p>只需要一个午后，一个滑梯</p>
<p>还有一根棒棒糖</p>
</div>
<div class="text text4">
<p>18岁的我，纯粹而热血</p>
<p>带着属于青春的肆意张狂,我成长着</p>
</div>
<div class="text text5">
<p>毕业后的世界并没有想象中的色彩斑斓</p>
<p>我终于明白社会的残酷,和自己的渺小</p>
</div>
<div class="text text6">
<p>在对的时间遇见对的人</p>
<p>许一生，不离不弃</p>
</div>
<div class="text text7">
<p>这一天，我当爸爸了</p>
<p>宝贝，我和你妈妈会带你慢慢认识这个世界</p>
<p>守护你一天天长大</p>
<p>初为人父，请多指教</p>
</div>
<div class="text text8">
<p>终于，事业步入了正轨</p>
<p>一路的执着，辛苦，却也值得</p>
</div>
<div class="text text9">
<p>今天，是我儿子结婚的日子</p>
<p>原来一晃20多年过去了</p>
</div>
<div class="text text10">
<p>今年的冬天仿佛格外的寒冷</p>
<p>我又加上了一件毛背心</p>
<p>孩子们都不在身边，身边只剩下这只鸟儿</p>
<p>有那么一刻，我觉得自己好像老了……</p>
</div>
<div class="text text11">
<p>如果可能，我还想多活几年</p>
<p>看着我的乖孙女慢慢长大</p>
</div>
<div class="text text12 ls">
<p>都说人死前会像过电影一样</p>
<p>回顾自己的一生</p>
<p>我才发现自己的人生是何其短暂</p>
<p>却也是幸福的</p>
</div>
</div>
</div>
<div class="starfield" id="starfield2">
<div id="stars2"></div>
</div>
<div class="shareDiv"></div>
<div class="clock">
<img src="images/clock.png" alt="">
<div class="clast"></div>
</div>
<div class="role role1"></div>
<div class="ostars">
<div class="ostar"></div>
<div class="ostar pink"></div>
<div class="ostar blue"></div>
<div class="ostar yellow"></div>
</div>
<div class="text text13">
<p>有人说</p>
<p>人死后都会变成天上的星星</p>
<p>我也终于要迎来</p>
<p>属于我的一片浩瀚星空了</p>
</div>
<div class="text text14 fadeInUp animated3"></div>
<div class="text text0">
<p class="fadeInUp animated2">夏天的夜晚总是那么的醉人</p>
</div>
<div class="logo fadeInUp animated3"></div>
<div class="ewm fadeInUp animated3">
<img src="images/ewm.png" alt="">
<div class="ewmtip">
<p>长按/扫描二维码</p>
<p>创意H5一搜即得</p>
</div>
<div class="cych">
<a href="http://jiandou.com/">创意策划：
<span>简豆</span>
</a>
</div>
</div>
</div>
<!-- global end -->
<!--旋屏提示-->
<div id="orientLayer" class="mod-orient-layer">
<div class="mod-orient-layer__content">
<i class="icon mod-o
前端 h5交互设计 成长时光故事
需积分: 12 103 浏览量
2022-12-10
21:33:53
上传
评论
收藏 7.71MB ZIP 举报
前端 h5交互设计 成长时光故事 （302个子文件） 
animate.css 73KB main.css 41KB
index.html 22KB
bg.jpg 214KB night.jpg 12KB jquery-3.2.1.min.js 85KB iscroll-probe.js 54KB howler.min.js 28KB stats.js 8KB js.js 8KB imagesLoader.min.js 2KB app.js 1KB music.mp3 980KB
clock.png 1.22MB band.png 514KB walking.png 248KB tree4.png 224KB table.png 193KB house.png 193KB tree5.png 192KB house3.png 176KB tree6.png 174KB house2.png 164KB marriage.png 122KB childbirth.png 113KB grass1.png 94KB tree.png 90KB p1.png 88KB work2.png 85KB work.png 83KB tree3.png 77KB huati.png 73KB newman.png 72KB snow.png 72KB grand.png 71KB grandpa.png 63KB tree2.png 63KB wall.png 43KB grass2.png 39KB cbg.png 34KB thumb.png 29KB clock12.png 24KB boy.png 17KB t1.png 16KB cloud2.png 16KB stone.png 15KB cloud1.png 10KB 11_ActionScript_30007.png 10KB 10_ActionScript_30004.png 10KB 11_ActionScript_30003.png 10KB 10_ActionScript_30005.png 10KB 10_ActionScript_30006.png 10KB 11_ActionScript_30006.png 10KB 11_ActionScript_30002.png 10KB 10_ActionScript_30007.png 10KB 10_ActionScript_30016.png 10KB autumn.png 10KB 11_ActionScript_30005.png 10KB 11_ActionScript_30001.png 10KB 11_ActionScript_30008.png 10KB 11_ActionScript_30004.png 10KB 10_ActionScript_30003.png 10KB 11_ActionScript_30025.png 10KB 11_ActionScript_30023.png 10KB 11_ActionScript_30014.png 10KB 11_ActionScript_30024.png 10KB 10_ActionScript_30015.png 10KB 10_ActionScript_30008.png 10KB 10_ActionScript_30017.png 10KB 7_ActionScript_30007.png 10KB 7_ActionScript_30003.png 10KB 10_ActionScript_30002.png 10KB 11_ActionScript_30009.png 10KB 7_ActionScript_30001.png 10KB 10_ActionScript_30018.png 10KB 11_ActionScript_30015.png 10KB 7_ActionScript_30002.png 10KB 10_ActionScript_30025.png 9KB 7_ActionScript_30016.png 9KB 11_ActionScript_30022.png 9KB 11_ActionScript_30016.png 9KB 7_ActionScript_30006.png 9KB 10_ActionScript_30009.png 9KB 7_ActionScript_30025.png 9KB 7_ActionScript_30008.png 9KB 11_ActionScript_30013.png 9KB 7_ActionScript_30017.png 9KB 7_ActionScript_30015.png 9KB 10_ActionScript_30024.png 9KB 10_ActionScript_30001.png 9KB 7_ActionScript_30014.png 9KB 7_ActionScript_30005.png 9KB 7_ActionScript_30012.png 9KB 7_ActionScript_30019.png 9KB 7_ActionScript_30004.png 9KB 7_ActionScript_30018.png 9KB 10_ActionScript_30014.png 9KB 7_ActionScript_30020.png 9KB 11_ActionScript_30021.png 9KB 11_ActionScript_30017.png 9KB共 302 条
- 1
- 2
- 3
- 4
资源评论
Axjy
- 粉丝: 0
- 资源: 13
最新资源
- DHCP+NAPT+RIP+ACL
- Qt实战Qt项目(7)Qt实现网页浏览器
- Unity-WebGL配置系统教程(含iis本地部署)
- GIS图幅号计算工具，用于计算图幅号
- Python中Hadoop MapReduce的一个简单示例.zip
- Panoply软件是大名鼎鼎的NASA下属的GISS研究所开发的可视化软件，该软件可以实现对地学常用数据的读取，其中包括netC
- 一些高质量的学习Ruby的资源清单.zip
- 基于STM32智能家居（智能云）
- 适合江苏地带的别墅小院子图纸D038-两层-11.04&11.94米-施工图.dwg
- 农村小别墅图纸四合院图纸D037-两层-13.20&12.90米-施工图.dwg
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
