html{
height: 100%;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
p{
color: black;
font-family: "microsoft yahei";
font-weight: bold;
left: -10px;
}
body{
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
height: 100%;
margin: 0;
padding: 0;
font-family: "microsoft yahei";
background-color: white ;
overflow: hidden;
}
.container{
margin:auto;
width: 452px;
height: 100%;
overflow: hidden;
position: relative;
}
.logo{
width:40%;
font-size: 70px;
font-weight: bold;
color: #d13100;
float: left;
position: relative;
}
.scoreBar{
width: 50%;
float:right;
background: #fff;
color: #111;
padding:10px;
position: relative;
margin-top:10px;
}
.scoreBar:before{
content: "";
display: block;
border-width: 20px;
border-color: transparent #fff transparent transparent ;
border-style: solid;
position: absolute;
top:50%;
left:-40px;
margin-top:-20px;
}
#score{
font-size: 50px;
}
#addScore{
position: absolute;
bottom: 0px;
font-size: 30px;
color:#999;
opacity: .8;
top:4px;
right: 0;
}
#addScore.show{
opacity: .8;
transition:all .5s ease; -ms-transition:all .5s ease; -moz-transition:all .5s ease; -o-transition:all .5s ease; -webkit-transition:all .5s ease;
}
#addScore.hide{
opacity: 0;
transition:all .5s ease; -ms-transition:all .5s ease; -moz-transition:all .5s ease; -o-transition:all .5s ease; -webkit-transition:all .5s ease;
}
#stage{
background: #01bfae;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
position: absolute;
width: 450px;
height: 450px;
top:50%;
left:0;
margin-top: -200px;
border: 1px solid #eee;
z-index: 1;
}
#undo{
position: relative;
z-index: 990;
}
.cover{
position: fixed;
width: 100%;
height: 100%;
z-index: 999;
opacity: 0.1;
cursor: pointer;
}
.row0{
top:10px;
transition:all .2s ease; -ms-transition:all .2s ease; -moz-transition:all .2s ease; -o-transition:all .2s ease; -webkit-transition:all .2s ease;
}
.row1{
top:120px;
transition:all .2s ease; -ms-transition:all .2s ease; -moz-transition:all .2s ease; -o-transition:all .2s ease; -webkit-transition:all .2s ease;
}
.row2{
top:230px;
transition:all .2s ease; -ms-transition:all .2s ease; -moz-transition:all .2s ease; -o-transition:all .2s ease; -webkit-transition:all .2s ease;
}
.row3{
top:340px;
transition:all .2s ease; -ms-transition:all .2s ease; -moz-transition:all .2s ease; -o-transition:all .2s ease; -webkit-transition:all .2s ease;
}
.cell0{
left:10px;
transition:all .2s ease; -ms-transition:all .2s ease; -moz-transition:all .2s ease; -o-transition:all .2s ease; -webkit-transition:all .2s ease;
}
.cell1{
left:120px;
transition:all .2s ease; -ms-transition:all .2s ease; -moz-transition:all .2s ease; -o-transition:all .2s ease; -webkit-transition:all .2s ease;
}
.cell2{
left:230px;
transition:all .2s ease; -ms-transition:all .2s ease; -moz-transition:all .2s ease; -o-transition:all .2s ease; -webkit-transition:all .2s ease;
}
.cell3{
left:340px;
transition:all .2s ease; -ms-transition:all .2s ease; -moz-transition:all .2s ease; -o-transition:all .2s ease; -webkit-transition:all .2s ease;
}
span{
display: block;
width: 100px;
height: 100px;
position: absolute;
text-align: center;
line-height: 100px;
cursor: pointer;
background: #fff;
font-size: 43px;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
div{
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
.num2{
background: #fff;
color:#777;
font-size: 100px;
transition:all .2s ease; -ms-transition:all .2s ease; -moz-transition:all .2s ease; -o-transition:all .2s ease; -webkit-transition:all .2s ease;
animation: myfirst .5s;
-moz-animation: myfirst .5s; /* Firefox */
-webkit-animation: myfirst .5s; /* Safari or Chrome or opera */
}
.num4{
background: #fafafa;
color: #e9b856;
font-size: 100px;
transition:all .2s ease; -ms-transition:all .2s ease; -moz-transition:all .2s ease; -o-transition:all .2s ease; -webkit-transition:all .2s ease;
animation: myfirst .5s;
-moz-animation: myfirst .5s; /* Firefox */
-webkit-animation: myfirst .5s; /* Safari or Chrome */
}
.num8{
background: #f3f3f3;
color:#f94e2f;
font-size: 100px;
transition:all .2s ease; -ms-transition:all .2s ease; -moz-transition:all .2s ease; -o-transition:all .2s ease; -webkit-transition:all .2s ease;
animation: myfirst .5s;
}
.num16{
background: #F5EC00;
color:#fff;
font-size: 80px;
transition:all .2s ease; -ms-transition:all .2s ease; -moz-transition:all .2s ease; -o-transition:all .2s ease; -webkit-transition:all .2s ease;
animation: myfirst .5s;
}
.num32{
background: #fcc20e;
color: #fdfdfd;
font-size: 80px;
transition:all .2s ease; -ms-transition:all .2s ease; -moz-transition:all .2s ease; -o-transition:all .2s ease; -webkit-transition:all .2s ease;
}
.num64{
background: #f94a3b;
color:#fff;
font-size: 80px;
transition:all .2s ease; -ms-transition:all .2s ease; -moz-transition:all .2s ease; -o-transition:all .2s ease; -webkit-transition:all .2s ease;
}
.num128{
background: #222;
color: #f94e2f;
font-size: 52px;
transition:all .2s ease; -ms-transition:all .2s ease; -moz-transition:all .2s ease; -o-transition:all .2s ease; -webkit-transition:all .2s ease;
}
.num256{
background: #d13100;
color:#ffcc66;
font-size: 52px;
transition:all .2s ease; -ms-transition:all .2s ease; -moz-transition:all .2s ease; -o-transition:all .2s ease; -webkit-transition:all .2s ease;
}
.num512{
background: #fff300;
color: #FB4E4E;
font-size: 52px;
transition:all .2s ease; -ms-transition:all .2s ease; -moz-transition:all .2s ease; -o-transition:all .2s ease; -webkit-transition:all .2s ease;
}
.num1024{
background: #6483b5;
color: #f6f7ff;
font-size: 52px;
transition:all .2s ease; -ms-transition:all .2s ease; -moz-transition:all .2s ease; -o-transition:all .2s ease; -webkit-transition:all .2s ease;
}
.num2048{
background: #000000;
color: #fff300;
font-size: 52px;
transition:all .2s ease; -ms-transition:all .2s ease; -moz-transition:all .2s ease; -o-transition:all .2s ease; -webkit-transition:all .2s ease;
}
.num4096{
background: #ff0099;
color: #fff;
font-size: 52px;
transition:all .2s ease; -ms-transition:all .2s ease; -moz-transition:all .2s ease; -o-transition:all .2s ease; -webkit-transition:all .2s ease;
}
@keyframes myfirst
{
0%{opacity: 0;transform:scale(0)}
50% {opacity: .5;transform:scale(1.5)}
100%{opacity: 1;transform:scale(1)}
}
@-moz-keyframes myfirst /* Firefox */
{
0%{opacity: 0;-moz-transform:scale(0)}
50% {opacity: .5;-moz-transform:scale(1.5)}
100%{opacity: 1;-moz-transform:scale(1)}
}
@-webkit-keyframes myfirst /* Safari or Chrome */
{
0%{opacity: 0;-webkit-transform:scale(0)}
50% {opacity: .5;-webkit-transform:scale(1.5)}
100%{opacity: 1;-webkit-transform:scale(1)}
}