520告白气球展手机活动页面html5动画模板资源-CSDN文库

共64个文件

png：35个

jpg：13个

js：7个

手机活动

html5动画

1星需积分: 42 154 浏览量 2018-05-18 13:54:09 上传评论收藏 4.72MB ZIP 举报

在IT行业中，HTML5是一种强大的标记语言，常用于构建网页和网页应用，尤其在创建动态、交互式的用户体验方面表现出色。本主题聚焦于一个特定的应用场景——“520告白气球展手机活动页面”，这是一个利用HTML5技术制作的手机活动页面模板，旨在为用户提供一个浪漫且富有创意的告白平台。我们来看“520告白气球展”这个概念。520在中国网络文化中代表“我爱你”，因为数字520在中文发音上与“我爱你”相似。因此，520告白气球展手机活动页面旨在捕捉这个浪漫时刻，通过视觉效果和互动体验，帮助用户向心爱的人表达情感。这样的页面通常包含动画元素，如飘动的气球、浪漫的背景音乐以及个性化的告白语句。接下来，我们关注HTML5动画。HTML5的Canvas API和SVG（Scalable Vector Graphics）使得开发者可以直接在网页上绘制动态图形，无需依赖Flash等外部插件。在这个模板中，动画可能是通过CSS3动画、JavaScript（可能包括jQuery或GreenSock Animation Platform等库）或者HTML5的Canvas实现的。这些动画可能包括气球上升、飘动的效果，以及用户交互时的反馈动画，如点击按钮后的视觉变化。再者，文件结构中的“index.html”是整个网页的入口点，包含了HTML标记和结构。它会引用CSS和JavaScript文件，以实现设计样式和交互功能。CSS文件（可能位于名为“css”的文件夹内）负责页面的布局、颜色、字体等视觉元素，确保页面美观并符合设计要求。JavaScript文件（可能位于“js”文件夹中）则处理用户交互、动画逻辑以及可能的数据交换。 “images”文件夹则包含所有用于页面的图像资源，如背景图片、气球图像、按钮图标等。这些图像可能通过CSS的background-image属性或HTML的<img>标签引用，为页面增添视觉吸引力。 "520告白气球展手机活动页面html5动画模板"是一个结合了HTML5技术、CSS3和JavaScript的创意项目，它展示了如何利用现代Web技术来构建富有情感表达力的交互式网页。开发者通过精心设计的动画和用户交互，创造出一个独特且具有情感共鸣的数字环境，让告白变得更加特别和难忘。对于学习和实践Web前端开发的人员来说，这样的模板提供了一个很好的参考，可以深入了解HTML5动画的实现方式以及如何优化移动设备上的用户体验。

资源推荐

资源详情

资源评论

收起资源包目录

520告白气球展手机活动页面html5动画模板.zip （64个子文件）

css

swiper.min.css 17KB

animate.min.css 56KB

css.css 14KB

pageloader.css 3KB

images

red-ball.png 82KB

P6-img3.png 9KB

p5-textBg.png 2KB

P2.jpg 24KB

P6-img2.png 15KB

P1.jpg 14KB

p4-yiy02.png 17KB

p7-4.jpg 78KB

loadIng.png 24KB

P6-img1.png 34KB

heartBal.png 1.13MB

p7-2.jpg 57KB

P6-m1.png 38KB

p4-bg.jpg 310KB

loadgif.gif 13KB

p7.jpg 38KB

cloud.png 43KB

p2-Text02.png 5KB

P3-1.jpg 386KB

P6-m2.png 50KB

P5-ball.png 39KB

P3-2.jpg 385KB

p5.jpg 168KB

P6-end.png 51KB

ball-x.png 11KB

p4-yiy.png 17KB

p2-cloudLeft.png 49KB

P4-text02.png 5KB

p2-heartCloud.png 78KB

yellow-ball.png 75KB

ball.png 45KB

music.gif 8KB

p7-3.jpg 48KB

p2-centerText.png 3KB

p2-cloudRight.png 49KB

p5-btn.png 8KB

P5-light.png 5KB

P6.jpg 15KB

pink-ball.png 78KB

orange-ball.png 75KB

01.mp3 818KB

P6-m3.png 41KB

p2-centerBg.png 52KB

boom.png 143KB

P5-jt.png 3KB

P4-text.png 19KB

loadBg.jpg 13KB

music.png 8KB

p4-hand.png 4KB

p2-Text01.png 4KB

phoneGIF.gif 4KB

p7-1.jpg 63KB

html5shiv.min.js 3KB

swiper.min.js 76KB

loading.js 2KB

main.js 2KB

pageloader.js 2KB

animate.min.js 1KB

jquery.js 253KB

index.html 16KB

<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="keywords" content="" /> <meta name="description" content="" />  <script type="text/javascript"> var phoneWidth = parseInt(window.screen.width); var phoneScale = phoneWidth/640; var ua = navigator.userAgent; if (/Android (\d+\.\d+)/.test(ua)){ var version = parseFloat(RegExp.$1); // andriod 2.3 if(version>2.3){ document.write('<meta name="viewport" content="width=640, minimum-scale = '+phoneScale+', maximum-scale = '+phoneScale+', target-densitydpi=device-dpi">'); // andriod 2.3以上 }else{ document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">'); } // 其他系统 } else { document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">'); } </script> <title>告白气球</title> <script src="js/html5shiv.min.js" type="text/javascript"></script> <link href="css/animate.min.css" rel="stylesheet" type="text/css"> <link href="css/css.css" rel="stylesheet" type="text/css"> <link href="css/swiper.min.css" rel="stylesheet" type="text/css"/> <link rel="stylesheet" id="pageloader-css" href="css/pageloader.css" type="text/css" media="all" />   <script src="js/loading.js" type="text/javascript"></script> <style> </style> </head> <body> <audio loop src="images/01.mp3" id="audio" autoplay preload="auto"></audio> <div class="music"><img class="music-img ro" src="images/music.png"><div class="music-p"><img src="images/music.gif"></div></div>  <div id="bonfire-pageloader"> <div class="bonfire-pageloader-icon"> <img src="images/loadgif.gif"/> </div> </div>  <div class="zb" style="position:absolute;top:0;z-index:999;font-size:2rem;display:none"> <p> 坐标: (beta=<span id="beta" class="value">null</span>, gamma=<span id="gamma" class="value">null</span>, alpha=<span id="alpha" class="value">null</span>, 滚动背景值=<span id="lefts">null</span>,屏幕宽=<span id="bjk">null</span>,移动屏幕比=<span id="pmb">null</span>,开关=<span id="open">null</span>,</p> </div> <div class="swiper-container SwiperBig"> <div class="swiper-wrapper">  <div class="swiper-slide p1 swiper-no-swiping"> <div class="p1-box"> <div class="p1-text">戳破气球，看看会发生什么？</div> <div class="p1_ball"><img src="images/ball.png"/></div> <div class="ball_boomdiv"></div> <div class="p1_ballx"><img src="images/ball-x.png"/></div> <div class="p1-cloud"><img src="images/cloud.png"/></div>  <div class="ball01 "><img src="images/orange-ball.png"/></div> <div class="ball02"><img src="images/red-ball.png"/></div> <div class="ball03"><img src="images/pink-ball.png"/></div> <div class="ball04"><img src="images/yellow-ball.png"/></div> </div> </div>  <div class="swiper-slide"> <div class="p2-box"> <div class="p2-centerBox"> <div class="p2-centerImg"></div> </div> <div class="p2-text01"></div> <div class="p2-text02"></div> <div class="p2-cloudLeft"></div> <div class="p2-cloudHeart"></div> <div class="p2-cloudRight"></div> </div> </div>  <div class="swiper-slide"> <div class="p3-box"> <div class="bj"> <div class="bj01 on"></div> <div class="bj02 hide"></div> </div> <div class="p3-text"><p>彩虹走廊 —“穿越七彩的时光来遇见你”</p><P>汇金星力城 1F 中庭</P></div> <div class="p3-num">您已穿越：<span id="cy-num">1</span>光年</div> <div class="p3-phone"> <img src="images/phoneGIF.gif"/> <p>左右翻转试一试</p> </div> </div> </div>  <div class="swiper-slide"> <div class="p4-box"> <div class="p4-yiy01 on"></div> <div class="p4-yiy02 hide"></div> <div class="p4-text"><img src="images/P4-text.png"/></div> <div class="p4-text02"><img src="images/P4-text02.png"/></div> </div> </div>  <div class="swiper-slide swiper-no-swiping"> <div class="p5-box"> <div class="p5-text">你是第<span>534</span>位 “热气球”升空助力者</div> <div class="p5-Time hide">倒计时<span>15</span>秒</div> <div class="p5-heart"></div> <div class="p5-jt"></div> <div class="p5-ball"></div> <div class="p5-ball02"></div> <div class="p5-light"></div> <div class="p5-light2"></div> <div class="p5-light3"></div> <div class="p5-light4"></div> <div class="p5-btn"><img src="images/p5-btn.png"/></div> </div> </div>  <div class="swiper-slide"> <div class="p7-box"> <div class="swiper-container p7-swiper" style="margin-top:42%;"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="images/p7-1.jpg"/></div> <div class="swiper-slide"><img src="images/p7-2.jpg"/></div> <div class="swiper-slide"><img src="images/p7-3.jpg"/></div> <div class="swiper-slide"><img src="images/p7-4.jpg"/></div> </div> </div> </div> </div>  <div class="swiper-slide swiper-no-swiping"> <div class="p6-box"> <div class="p6-centerBox"> <div class="p6-centerImg"></div> </div> <div class="p6-text01"></div> <div class="p6-text02"></div> <div class="p6-img1"><img src="images/P6-m1.png"/></div> <div class="p6-img2"><img src="images/P6-m2.png"/></div> <div class="p6-end"></div> </div> </div> </div> </div> <script src="js/swiper.min.js" type="text/javascript"></script> <script src="js/jquery.js" type="text/javascript"></script> <script src="js/main.js" type="text/javascript"></script> <script src="js/pageloader.js" type="text/javascript"></script> <script> $(".p1_ball").bind("click",function(){ $(this).hide(); $(".ball_boomdiv").show().addClass("ball_boom"); $(".p1_ballx,.p1-text").hide(); setTimeout(function(){ $(".ball01").addClass("ball_ani").css({"display":"block","opacity":"1"}) },500); setTimeout(function(){ $(".ball02").addClass("ball_ani").css({"display":"block","opacity":"1"}) },1000); setTimeout(function(){ $(".ball03").addClass("ball_ani").css({"display":"block","opacity":"1"}) },1300); setTimeout(function(){ $(".ball04").addClass("ball_ani").css({"display":"block","opacity":"1"}) },1600); setTimeout(function(){ swiper.slideTo(1,1500,true); $(".ball01,.ball02,.ball03,.ball04").hide()

评论收藏

内容反馈