<!DOCTYPE HTML>
<head>
<meta charset="utf-8">
<meta name="author" content="Tencent-TGideas">
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>抽绷带-全民打怪兽</title>
<!-- 设计：yafeezhou| 重构：brucewan | 创建：2014/05/08 | 更新：| 团队博客：http://tgideas.qq.com/ -->
<script>
var _speedMark = new Date();
</script>
<style>
/* global */
html,body,ul,h1,h2,h3,p,input,img,figure{margin: 0;padding: 0;}
ul,ol{list-style: none;}
html{overflow: hidden;}
body{width: 100%;height: 100%;overflow: hidden;-webkit-user-select: none;}
body{font:12px/21px Arial,\5FAE\8F6F\96C5\9ED1;color: #fff;}
@font-face {font-family: 'icon';src: url('./res/hero.woff') format('woff'), url('./res/hero.ttf') format('truetype');}
[class^="icon-"]:before, [class*=" icon-"]:before {display: inline-block; width: 1em;margin-right: .2em;font-family: "icon";font-style: normal;font-weight: normal;text-align: center;speak: none;line-height: 1em; margin-left: .2em;}
.icon-more:before { content: '\e800'; }
.icon-share:before { content: '\e801'; }
.icon-play:before { content: '\e802'; }
a{color: #33234f;text-decoration: none;}
a:active{-webkit-tap-highlight-color: rgba(0,0,0,0);}
@-webkit-keyframes jump {
0% { -webkit-transform: translate(0, 0);}
100% { -webkit-transform: translate(0, 100px);}
}
@-webkit-keyframes wave {
0% { -webkit-transform: scale(1, 1);opacity: 0.5;}
100% { -webkit-transform: scale(2, 2);opacity: 0;}
}
/* layout */
.screen-slide{position: absolute;height: 300%;width: 100%;}
.screen-slide .s{height: 33.4%;position: relative;overflow: hidden;}
.screen-slide .content{position: absolute;left: 50%;top: 50%;width: 360px;height: 575px;margin-left: -180px;margin-top: -288px;background: #ff0;}
.s1{background-color: #4bb8a4;}
.s1 .content{background: url(./images/bg-s1.jpg);-webkit-background-size: 360px 575px;background-size: 360px 575px;}
.s1 .progress{position: absolute;right: 100px;top: 243px;width: 130px;font-size: 24px;text-align: center;}
.s1 .progress .num{margin-right: 5px;font-size: 42px}
.s2{background-color: #4bb8a4;}
.s2 .content{background: url(./images/bg-s2.jpg);-webkit-background-size: 360px 575px;background-size: 360px 575px;}
.s2 .paper-box{-webkit-transform:skew(0,-8deg);transform:skew(0,-8deg);position: absolute;top: 232px;left: 118px;width: 176px;height: 400px;background: url(./images/bg-paper.jpg) repeat-y;-webkit-background-size: 176px 143px;background-size: 176px 143px;}
.s2 .tips{position: absolute;top: 100px;left: 0;width: 360px;height: 400px;text-align: center;line-height: 1}
.s2 .tips p{margin: 8px 0;}
.s2 .tips .f1{font-size: 14px;}
.s2 .tips .f2{font-size: 30px;font-weight: bold;}
.s2 .tips .f3{font-size: 14px;line-height: 18px;color: #066355}
.s2 .tips .f4{font-size: 40px;color: #1d8172;}
.s2 .tips .f5{font-size: 16px;}
.s2 .tips .f6{font-size: 28px;color: #ff0}
.s2 .tips .f7{font-size: 24px;color: #fff}
.s2 .guide{position: absolute;top: 280px;left: 116px;z-index: 1;width: 130px;height: 200px;color: #000;font-weight: bold;font-size: 16px;text-align: center;pointer-events: none;-webkit-transition:.5s opacity;}
.s2 .guide .hand{width: 75px;height: 65px;margin: 10px 0 0 28px;background: url('./images/icon-hand.png') no-repeat;-webkit-background-size: 75px 65px;background-size: 75px 65px;-webkit-animation: jump 2s infinite;}
.s2 .guide .f8{font-size: 12px;font-weight: normal;}
.s2 .guide.hide{opacity: 0}
.s2 .logo{position: absolute;left:10px;top: 10px;z-index: 2;opacity: .2;}
.s3{background-color: #556573;}
.s3 .content{background: url(./images/bg-s3.jpg);-webkit-background-size: 360px 575px;background-size: 360px 575px;}
.s3 .tips{width: 200px;margin-left: 80px;padding-top: 110px;text-align: center;}
.s3 .tips .f1{font-size: 14px;}
.s3 .tips .f2{font-size: 14px;color: #fffb87}
.s3 .tips .f3{margin-top: 10px;font-size: 20px;color: #fffb87}
.s3 .tips .f3 .num{margin: 0 5px;font-size: 28px;}
.s3 .img img{width: 120px;height: 125px;}
.s3 .tips .f4{font-size: 12px;color: #b5c8d8}
.s3 .logo{position: absolute;left:10px;top: 10px;z-index: 2;opacity: .2;}
.s3 .fuc{margin-top: 15px;text-align: center;}
.s3 .fuc .btn-wrap{display: inline-block;position: relative;}
.s3 .fuc .btn-wrap .bg{position: absolute;left: 10px ;top: 0;width: 60px;height: 60px;border-radius: 30px;background: #e6f6ff;-webkit-animation: wave 2s infinite;}
.s3 .fuc .btn-wrap .about{position: absolute;left: -22px;width: 120px;top: 70px;border-radius: 3px; background-color: rgba(255,255,255,0.2);color: #fff}
.s3 .fuc .btn{position: absolute;left: 0;top: 0;z-index: 2;display: inline-block;width: 60px;height: 60px;border-radius: 30px;margin: 0 10px;background-color: #76a6c8;position: relative;-webkit-box-shadow:0 3px rgba(0,0,0,.4);box-shadow:0 3px rgba(0,0,0,.4);}
.s3 .fuc .btn span{position: absolute;width: 60px;height: 60px;top: -3px;left: 0;border-radius: 30px;background-color: #e6f6ff;color: #5d90ab;font-size: 12px;line-height: 18px;}
.s3 .fuc .btn span::before{display: inline-block;width: 100%;margin: 12px 0 0 0;font-size: 20px}
.s3 .fuc .btn-em{background-color: #c9950c;}
.s3 .fuc .btn-em span{background-color: #f3c856;color: #ab6c21}
.share-guide{position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.8) url(./images/icon-arrow.png?33) no-repeat 90% 20px;-webkit-background-size: 40px 80px;background-size: 40px 80px;color: #fff;}
.share-guide p{padding: 100px 30px 30px;text-align: right;font-size: 20px;line-height: 30px;}
.share-guide .em{color: #ff734d;}
</style>
<script>
document.documentElement.style.height = window.innerHeight + 'px';
</script>
</head>
<body>
<div class="screen-slide">
<div class="s s1">
<div class="content">
<div class="progress"><span class="num">0</span>%</div>
</div>
</div>
<div class="s s2">
<a href="#" class="logo"><img src="./images/logo.png" width="59" height="42" alt="全民打怪兽"></a>
<div class="content">
<div class="tips">
<div class="ready">
<p class="f1"> </p>
<p class="f2">“抽绷带 救怪兽”</p>
<p class="f3">12秒内看看你能抽出多长的绷带</p>
</div>
<div class="run" style="display:none">
<p class="f4">“00:12:00”</p>
<p class="f5">已抽出绷带 <span class="f6"><span class="dis">0</span> <span class="f7">m</span></span></p>
</div>
</div>
<div class="guide">
<p><span class="f8">提示</span><br/>手指下向滑动<br/>开始游戏</p>
<div class="hand"></div>
</div>
<div class="paper-box"></div>
</div>
</div>
<div class="s s3">
<a href="#" class="logo"><img src="./images/logo.png" width="59" height="42" alt="全民打怪兽"></a>
<div class="content">
<div class="tips">
<p class="f1">你神一样的手速，碉堡了</p>
<p class="f2">本次抽出绑带<span class="f3"><span class="num">7</span>m</span></p>
<p class="img"><img src="./images/pic1.jpg" alt=""></p>
<p class="f4">“我还需要更多绑带”</p>
</div>
<div class="fuc">
<div class="btn"><span class="icon-more">再来</span></div>
<div class="btn"><span class="icon-share">分享</span></div>
<div class="btn-wrap">
<div class="btn btn-em"><span class="icon-play">去战场</span></div>
<div class="bg"></div>
<p class="about">去玩全民打怪兽吧！</p>
</div>
</div>
</div>
</div>
</div>
<div class="share-guide" style="display:none;">
<p>点击上面按钮<br/>将成绩 <span class="em">分享到朋友圈</span></p>
</div>
<script>
(function(e){if(e)return;var t=["
抽绷带HTML5游戏源码
版权申诉
118 浏览量
2022-06-19
10:15:41
上传
评论
收藏 246KB RAR 举报
cbd.rar （16个子文件） 
cbd images 
bg-s1.jpg 53KB pic3.jpg 12KB pic1.jpg 11KB pic2.jpg 12KB
icon-arrow.png 2KB pic4.jpg 8KB bg-s2.jpg 26KB pic5.jpg 7KB bg-s3.jpg 13KB logo.png 21KB icon-hand.png 6KB bg-paper.jpg 9KB res 
hero.ttf 4KB hero.woff 3KB
index.html 22KB icon.png 89KB资源评论
