.rank{ width: 480px; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; display: none; visibility: hidden; } .rank-png{ background:url("../assets/rank_png8_2014091101.jpg")no-repeat } .rank-bg{ background:url("../assets/rank_png8_2014091101.jpg")no-repeat } .rank .scroll-wrapper{ position:absolute; width:480px } .rank .con{ position:relative; width:100% } .rank .bgbg{ width:480px; top:0px; height:100%; position:absolute; background:url("../assets/rank_bg.jpg")repeat-y } .rank .bottom-bg{ width:480px; height:75px; left:0px; bottom:0px; position:absolute; background-position:-0px -400px } .rank .rank-tab{ width:480px; height:107px; left:0px; top:0px; position:absolute; z-index:0 } .rank .rank-tab .tab-bg{ width:480px; height:107px; left:0px; top:0px; position:absolute; background-position:-0px -116px; z-index:0 } .rank .rank-tab.select1 .tab-bg{ background-position:-0px -223px } .rank .rank-tab.no-login .tab-bg{ background-position:-0px -677px } .rank .rank-tab .tab{ width:240px; height:65px; top:0px; position:absolute; display:block; z-index:1 } .rank .rank-tab .tab1{ left:0px } .rank .rank-tab .tab2{ left:240px } .rank .back-btn{ position:absolute; width:186px; height:63px; font-size:35px; color:#993e00; line-height:56px; text-align:center; font-weight:bold; left:50px; bottom:-6px; text-align:left; text-indent:83px; background-position:0 -99px; -webkit-transform:scale(0.7) } .rank .back-btn .mc{ width:26px; height:17px; left:42px; top:21px; position:absolute; background-position:-227px -304px } .rank .share-btn{ position:absolute; width:186px; height:63px; font-size:35px; color:#993e00; line-height:56px; text-align:center; font-weight:bold; right:50px; bottom:-6px; background-position:-220px -99px; -webkit-transform:scale(0.7) } .rank .back-btn.touch{ left:150px } .rank .item{ position:relative; width:480px; height:71px; display:block; background-position:0px -0px } .rank .item.me{ background-position:0px -330px } .rank .item .order-mc{ width:60px; height:56px; left:32px; top:8px; position:absolute } .rank .item .order-mc.rank-order1{ background-position:-11px -290px } .rank .item .order-mc.rank-order2{ background-position:-81px -290px } .rank .item .order-mc.rank-order3{ background-position:-151px -290px } .rank .item .order{ position:absolute; display:block; left:26px; top:2px; font-size:26px; text-align:center; color:#662100; line-height:63px; width:70px } .rank .item .name{ position:absolute; display:block; left:160px; top:0px; font-size:19px; text-align:left; color:#4e2410; line-height:63px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; width:190px } .rank .item.me .name{ color:#0855b8 } .rank .item .score{ position:absolute; display:block; right:41px; top:2px; font-size:30px; text-align:right; color:#662100; line-height:63px } .rank .line{ position:relative; width:470px; height:4px; display:block; background-position:-10px -430px; margin-top:0px; margin-bottom:0px } .rank .text-item{ position:relative; width:480px; height:45px; display:block; background-position:-0px -71px; font-size:19px; text-align:center; color:#c1c1c1; line-height:43px } .rank .title-text{ position:absolute; width:480px; height:45px; display:block; top:65px; bottom:0px; font-size:19px; text-align:center; color:#c1c1c1; line-height:43px } .rank .item .figure{ position:absolute; display:block; left:97px; top:9px; width:48px; height:48px } .player-2,.player-1{ width:111px; height:105px; position:absolute; top:0; background:url("../assets/player_2014090101.png") } .player-2{ width:108px; height:116px; background:url("../assets/player2_2014091101.png") } .track-1{ width:222px; height:100%; position:absolute; left:12px; top:0; overflow:hidden } .track-2{ width:222px; height:100%; position:absolute; right:12px; top:0; overflow:hidden } .game-bg{ width:480px; height:100%; background:url("../assets/bg_2014091102.jpg")left center } .result,.main{ width:480px; height:100%; position:absolute; left:0; top:0; z-index:1 } .result{ background-color:#e5f2ff } .result .scroll-wrapper{ position:absolute; width:480px; height:100% } .result .con{ background:url("../assets/result_bg_2014091001.jpg")no-repeat; position:relative; width:100%; height:100% } .result .tips-mc{ position:absolute; width:20px; height:13px; background-position:-389px -24px; left:230px; top:230px } .result .tips-text{ position:absolute; width:200px; color:#FFFFFF; font-size:28px; left:60px; top:185px; text-align:right } .result .lose-con{ width:164px; height:88px; background-position:-250px -107px; position:absolute; left:130px; top:50px } .result .win-con{ position:absolute; left:130px; top:50px; width:157px; height:94px; background-position:-252px -203px } .result .win-mv{ position:absolute; left:265px; top:181px; width:179px; height:105px; -webkit-animation:win-mv 1.8s step-end infinite; background:url("../assets/win_ani_2014091201.png")no-repeat; -webkit-transform:scale(1.5) } @-webkit-keyframes win-mv{ 0%{ background-position-x:0px } 13%{ background-position-x:-179px } 23%{ background-position-x:-358px } 33%{ background-position-x:-537px } 48%{ background-position-x:-716px } 53%{ background-position-x:-895px } 92%{ background-position-x:-1074px } } @-webkit-keyframes loss-mv{ 0%{ background-position-x:0px } 50%{ background-position-x:-80px } } .result .lose-mv{ position:absolute; left:303px; top:181px; width:80px; height:105px; background-position-y:-0px; -webkit-animation:loss-mv 0.4s step-end infinite; -webkit-transform:scale(1.5); background:url("../assets/loss_ani_2014091201.png")no-repeat } .result .rank-con{ position:absolute; left:0px; top:564px; width:100%; height:400px } .result .rank .item .name{ width:140px } .result .rank .item{ width:480px; height:72px; background-position:-0px -505px; overflow:hidden } .result .rank .item.me{ background-position:-0px -577px } .result .rank-btn{ left:144px; bottom:30px; text-indent:30px } .result .rank-btn .mc{ position:absolute; left:22px; top:16px; width:34px; height:30px; display:block; background-position:-430px -40px } .result .rank .item span,.result .rank .item img{ margin-left:28px } .result .rank .item .score{ right:70px } .result .rank .bottom-item{ position:relative; width:480px; height:28px; display:block; background-position:-0px -649px } .main{ background-color:#000000; background:url("../assets/main_bg_2014091101.jpg")left center } .main-png8{ background:url("../assets/main_png8_2014091601.png") } .main-png32{ background:url("../assets/main_png32_2014091101.png") } .main .start{ width:234px; height:78px; position:absolute; display:block; background-position:-193px -285px; font-size:35px; color:#993e00; text-align:center; text-shadow:1px 1px 1px rgba(0,0,0,0.6); line-height:74px; left:50%; margin-left:-117px; top:50%; margin-top:125px; font-weight:bold } .floor100 .continue,.main .world-rank,.main .friend-rank{ position:absolute; left:50px; top:50%; margin-top:210px; width:186px; height:63px; background-position:-0px -284px; color:#FFF; font-size:19px; line-height:55px; text-shadow:1px 1px 1px rgba(0,0,0,0.6); text-align:center; font-weight:bold } .floor100 .continue{ margin-top:155px; font-size:30px } .main .world-rank{ left:250px; font-size:30px; text-indent:30px } .main .qq-tips{ position:absolute; right:40px; top:50%; margin-top:-305px; width:122px; height:22px; background-position:-337px -378px } .result .world-rank{ position:absolute; background-position:-0px -284px; width:186px; height:63px; color:#FFF; line-height:55px; text-shadow:1px 1px 1px rgba(0,0,0,0.6); text-align:center; font-weight:bold; font-size:30px; text-indent:30px; left:70%; margin-left:-93px; bottom:-28px; z-index:1 } .result .join-btn{ text-indent:0px; font-size:19px; left:28% } .result .world-rank em,.main .world-rank em{ left:20px; top:15px; position:absolute; width:34px; height:30px; background-position:-436px -15px } .main .text-span{ position:absolute; width:100%; left:0px; top:50%; margin-top:68px; font-size:19px; color:#356fd6; text-align:center; line-height:88px } .result .score-bg{ background-position:0 -163px; width:384px; height:118px; left:50%; position:absolute; top:300px; margin-left:-192px } .result .btn-wrapper{ width:100%; height:63px; position:absolute; left:0; top:430px; text-align:center } .floor100 .btn,.result .btn{ width:186px; height:63px; font-size:35px; color:#993e00; display:inline-block; line-height:56px; text-align:center; font-weight:bold } .result .restart{ background-position:0 -99px } .floor100 .share,.result .share{ margin-left:20px; background-position:-220px -99px } .floor100 .share{ position:absolute; left:240px; top:50%; margin-top:155px; text-shadow:1px 1px 1px rgba(0,0,0,0.6) } .result .weixin-rank{ margin-left:20px; background-position:-220px -99px } .result .score{ width:100%; height:50px; font-size:40px; font-weight:bold; text-align:center; line-height:50px; position:absolute; top:50px; right:0; color:#000 } .result .week-record{ position:absolute; left:54px; top:53px; color:#012751; font-size:19px; line-height:25px } .result .rank-info{ position:absolute; left:54px; top:40px; color:#FFFFFF; font-size:19px } .result .record{ position:absolute; left:54px; top:70px; color:#012751; font-size:19px; line-height:25px } .result .score-bg .friend-rank{ position:absolute; left:243px; top:57px; width:44px; height:47px; background-position:-314px -11px } .result .score-bg .world-rank{ position:absolute; left:300px; top:57px; width:44px; height:47px; background-position:-375px -11px } .result .result-num{ position:absolute; left:100px; top:270px } .result .record-icon{ width:102px; height:110px; position:absolute; left:340px; top:265px; background-position:-254px 0 } .result .result-num em{ display:inline-block } .result-num .num-0{ width:42px; height:55px; background-position:-52px -9px } .result-num .num-1{ width:27px; height:55px; background-position:-58px -69px } .result-num .num-2{ width:39px; height:55px; background-position:-55px -132px } .result-num .num-3{ width:40px; height:55px; background-position:-56px -196px } .result-num .num-4{ width:43px; height:55px; background-position:-114px -10px } .result-num .num-5{ width:40px; height:55px; background-position:-117px -77px } .result-num .num-6{ width:40px; height:55px; background-position:-118px -137px } .result-num .num-7{ width:41px; height:55px; background-position:-119px -202px } .result-num .num-8{ width:42px; height:55px; background-position:-186px -11px } .result-num .num-9{ width:40px; height:55px; background-position:-186px -73px } .result-num .floor{ width:43px; height:44px; background-position:-179px -144px } .block{ position:absolute } .block-0{ background-position:left top } .block-1{ background-position:left top } .block-2{ background-position:left top } .floor100{ width:480px; position:absolute; height:100%; left:0; top:0; background-color:#000000; z-index:1; background:url("../assets/floor100_2014091601.jpg")left center no-repeat } .prop{ background-position:-15px -363px; width:196px; height:56px; position:absolute; left:50%; margin-left:-98px } .score{ position:absolute; top:20px; right:50px; text-align:right; width:200px } .score-num em{ display:inline-block } .score-num .num-0{ width:18px; height:26px; background-position:-231px -415px } .score-num .num-1{ width:14px; height:26px; background-position:-251px -415px } .score-num .num-2{ width:18px; height:26px; background-position:-271px -415px } .score-num .num-3{ width:18px; height:26px; background-position:-291px -415px } .score-num .num-4{ width:20px; height:26px; background-position:-309px -415px } .score-num .num-5{ width:18px; height:25px; background-position:-331px -416px } .score-num .num-6{ width:18px; height:26px; background-position:-351px -415px } .score-num .num-7{ width:18px; height:25px; background-position:-371px -416px } .score-num .num-8{ width:19px; height:26px; background-position:-390px -415px } .score-num .num-9{ width:19px; height:26px; background-position:-410px -415px } .score-num .floor{ width:24px; height:26px; background-position:-436px -414px; display:none } .share-tips{ width:204px; height:169px; background-position:-0px -500px; position:absolute; right:0; top:5px } .share-tips.not-qq{ background-position:-223px -503px } .share-wb-tips{ width:140px; height:65px; background-position:-0px -427px; position:absolute; right:10px; top:10px } .jump-btn-2,.jump-btn-1{ width:97px; height:96px; background-position:-115px -685px; position:absolute; bottom:0px; left:50%; margin-left:-48px } .jump-btn-2{ background-position:-11px -685px } .share-qq{ position:absolute; z-index:3; left:0; bottom:0; width:100% } .share-qq-btn{ background:rgba(255,255,255,0.9); height:62px; width:100%; font-size:25px; color:#0e7ada; border-bottom:1px solid #959595; line-height:60px; text-align:center; font-weight:bold } .share-qq .btn1{ border-radius:10px 10px 0 0 } .share-qq .btn4{ border-radius:0 0 10px 10px; border:0 } .share-qq .cancel{ margin-top:10px; border-radius:10px; border:0 } .share-qq-mask{ position:absolute; width:100%; height:100%; background:rgba(0,0,0,0.2); left:0; z-index:2; top:0 } .icon100{ width:158px; height:55px; position:absolute; left:120px; top:50%; margin-top:-280px; background-position:-318px -741px } .xyyxBtn{ height: 0; display: block; width: 100%; padding-bottom: 10%; margin-top: 4%; }