html,body,div,p,ul,li,span,h1,h2,h3 { padding: 0; margin: 0; } html,body{ width: 100%; height: 100%; overflow: hidden; color: #fff; } .view { width: 640px; height: 100%; margin: 0 auto; background: url(../images/bg.jpg) center 0 no-repeat; background-size: cover; -webkit-touch-callout: none; /*防止用户复制和保存图片*/ -webkit-user-select: none; /*禁用了复制粘贴功能*/ -moz-user-select: none; position: relative; } #page_index,#page_game,#page_gameOver{ width: 100%; height: 100%; position: relative; overflow: hidden; } /*page_index*/ .index_img { width: 523px; height: 310px; background: url(../images/index_img.png) no-repeat; margin-left: 60px; margin-top: 120px; } .index_text { height: 47px; background: url(../images/index_text.png) no-repeat; padding-left: 340px; line-height: 50px; font-size: 40px; margin-top: 20px; margin-left: 120px; } #start_btn { position: absolute; display: inline-block; width: 290px; height: 302px; background: url(../images/start_btn.png) no-repeat; bottom: 80px; left: 175px; } .boyaaLogo { display: inline-block; position: absolute; width: 224px; height: 52px; background: url(../images/boyaalogo.png) no-repeat; right: 15px; bottom: 10px; } #voice_btn,.help_btn { display: inline-block; width: 67px; height: 72px; position: absolute; top: 20px; background: url(../images/top_btn.png) no-repeat; } #voice_btn{ left: 20px; background-position: 0 0; } #voice_btn.off{ background-position: 0 -80px; } .help_btn{ right: 20px; background-position: 0 -160px; } /*page_game*/ header .highest,header .score,#new_game_button,#share_btn,#continue_btn{ background: url(../images/btn_img.png) no-repeat; display: inline-block; } header { display: block; width: 100%; overflow: hidden; padding-top:30px; padding-bottom: 30px; } header .highest,header .score{ float: left; width: 202px; height: 94px; margin-left: 10px; overflow: hidden; } header .highest span,header .score span{ display: block; width: 90px; height: 30px; margin-top: 47px; margin-left: 75px; text-align: center; font-size: 26px; line-height: 30px; } header .highest { margin-left: 15px; background-position: 0 -328px; } header .score { background-position: 0 -216px; } header #new_game_button { display: block; width: 81px; height: 87px; float: right; margin-right: 30px; background-position: 0 -437px; } header p { font-family: Arial; font-size: 25px; margin: 5px auto; } #game_container { width: 100%; overflow: hidden; position: absolute; top:50%; left: 50%; margin-left: -290px; margin-top: -230px; } #grid_container { width: 580px; height: 660px; background-color: #102F42; border-radius: 10px; position: relative; } .grid_cell { width: 110px; height: 110px; border-radius: 6px; background-color: #17394D; position: absolute; } .number_cell { border-radius: 6px; font-family: Arial; font-weight: bold; font-size: 20px; line-height: 26px; text-align: center; position: absolute; overflow: hidden; background-size: 100% 100%; z-index: 3; } .number_cell span{ display: block; width: 60px; height: 25px; margin: 100px auto 0 auto; background-color: rgba(0, 0, 0, 0.6); border: 2px solid #fff; border-radius: 10px; } footer{ display: block; margin: 0px auto; width: 100px; padding: 10px 10px; font-family: Arial; color: white; border-radius: 10px; text-decoration: none; } /*gameOver*/ #page_gameOver,#page_share{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; } #page_help { position: absolute; top: 0; left: 0; bottom: 0; width: 640px; text-align: center; background-image:-webkit-linear-gradient(bottom, #107DE4, #032147); background-image:-o-linear-gradient(bottom, #107DE4, #032147); background-image:linear-gradient(to top, #107DE4, #032147); } #close_help_btn { position: absolute; bottom: 50px; left: 50%; margin-left: -185px; } #page_gameOver:before,#page_share:before{ display: block; content: " "; background-color: rgba(0, 0, 0, 0.7); position: absolute; top: 0; left: 0; bottom: 0; right:0; } #gameOver { position: relative; width: 602px; height: 650px; background: url(../images/gameover.png) no-repeat; z-index: 10; top:50%; left: 50%; margin-left: -301px; margin-top: -350px; overflow: hidden; } #this_score { position: absolute; top:325px; left: 250px; font-size: 40px; font-weight: 700; } #highest_score { position: absolute; top:420px; left: 370px; font-size: 40px; color:#4a85af; font-weight: 700; } #share_btn,#continue_btn{ width: 269px; height: 95px; position: absolute; top:550px; } #share_btn{ background-position: 0 0; left: 20px; } #continue_btn{ background-position: 0 -109px; right: 20px; } #grid_container .number_cell { position: absolute; -webkit-transition: -webkit-transform 200ms ease-in-out; -moz-transition: -moz-transform 200ms ease-in-out; transition: transform 200ms ease-in-out; background-image: url(../images/ren.png); background-repeat: no-repeat; background-size: 120px 727px; } .anim_add{ width:180px; height: 180px; position:absolute; z-index:12; background:url(../images/animation1.png) no-repeat 180px bottom; -webkit-animation:add 400ms steps(10) 0s; } @-webkit-keyframes add{ 0%{ background-position: 0 0; } 100%{ background-position: -1800px 0; } } .anim_eli{ width:200px; height: 200px; position:absolute; z-index:12; background:url(../images/animation2.png) no-repeat 200px bottom; -webkit-animation:eli 400ms steps(7) 0s; } @-webkit-keyframes eli{ 0%{ background-position: 0 0; } 100%{ background-position: -1400px 0; } } .cont_wrap{ position: absolute; z-index: 11; top:15px; right: 0px; } .boss_key, .boss_Qr { position: absolute; bottom: 50px; } .boss_key { left: 50%; margin-left: 450px; } .boss_Qr { left: 50%; margin-left: -674px; }