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;
}