<!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" />
<div id='wx_pic' style='margin:0 auto;display:none;'>
<img src='games/juanzhidai/images/pic300.jpg' />
</div>
<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 .content{background: url(./images/bg-s1.jpg);-webkit-background-size: 100% 100%;background-size: 100% 100%;}
.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: #000000;}
.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.png) repeat-y;-webkit-background-size: 176px 143px;background-size: 176px 143px;}
.s2 .tips{position: absolute;top: 90px;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;color: #6b4c24}
.s2 .tips .f3{font-size: 17px;line-height: 18px;color: #4ca8f7}
.s2 .tips .f4{font-size: 40px;color: #6b4c24;}
.s2 .tips .f5{font-size: 17px;color: #4ca8f7}
.s2 .tips .f6{font-size: 28px;color: #4ca8f7}
.s2 .tips .f7{font-size: 24px;color: #4ca8f7}
.s2 .guide{position: absolute;top: 260px;left: 140px;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: #000000;}
.s3 .content{background: url(./images/bg-s3.jpg);-webkit-background-size: 360px 575px;background-size: 360px 575px;}
.s3 .tips{width: 200px;height:200px;margin-left: 80px;padding-top: 45px;text-align: center;}
.s3 .tips .f1{font-size: 14px;}
.s3 .tips .f2{position: absolute;top: 180px;left: 116px;font-size: 14px;color: #c3020b}
.s3 .tips .f3{margin-top: 10px;font-size: 20px;color: #c3020b}
.s3 .tips .f3 .num{margin: 0 5px;font-size: 28px;}
.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 id='wx_pic' style='margin:0 auto;display:none;'>
<img src='http://game.ikongzhong.cn/game/shier/images/pic300.jpg' />
</div>
<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">
<div class="content">
<div class="tips">
<div class="ready">
<p class="f1"> </p>
<p class="f2">“看你有多拽”</p>
<p class="f3">10秒内看看你能拽出多长的优惠券</p>
</div>
<div class="run" style="display:none">
<p class="f4">“00:10: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">
<div class="content">
<div class="tips">
<p class="f1"></p>
<p class="f2"><span class="f3"><span class="num">7</span></span></p>
<p class="img"><img src="./" 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">
</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=["webkit","moz","o"],e={extend:function(e,t,n,r){n===undefined&&(n=!0);for(var i in t)if(n||!(i in e))r?r(i):e[i]=t[i];return e},support:{translate3d
shier.rar （11个子文件） 
shier images 
bg-paper.png 27KB
bg-s3.jpg 129KB icon-hand.png 6KB pic300.jpg 87KB icon-arrow.png 2KB bg-s1.jpg 127KB bg-s2.jpg 101KB res 
hero.woff 3KB hero.ttf 4KB
index.html 21KB icon.png 117KB资源评论
reg183
- 粉丝: 1851
- 资源: 1万+
