tv_xiaoyouxi/games/gtzp/css/main.css

body{
	background:#85d252;
}

img{width:100%;}

.rabbitLoading{
	background:#6584A3;
	position:absolute;
	left:0;
	top:0;
	width:100%;
	min-width:320px;
	max-width:640px;
	height:100%;
	z-index:9999;
	
}

.rabbitLoad{
	position:absolute;
	width:80%;
	top:25%;
	left:10%;
	padding-bottom:20px;
}

.rabbitLoad img{
	width:50%;
	position:relative;
	z-index:1;
	padding-bottom:40px;
}

.progressbar{
	background:#A69DB9;
	height:16px;
	width:100%;
	border-radius:3px;
	overflow:hidden;
	position:relative;
	border:3px #745CAB solid;
	margin-top:-10px;
	z-index:9;
}

.progressing{
	background:#BC7EA9;
	position:absolute;
	width:0%;
	height:100%;	
	-webkit-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}

.main{
	position:absolute;
	width:100%;
	min-width:320px;
	/*max-width:640px;*/
	margin:auto;
	height:100%;
	overflow:hidden;
	-webkit-transform-origin:50% 0;
	transform-origin:50% 0;
}

.sence{
	position:absolute;
	width:100%;
	height:100%;
	left:0;
	top:0;
	-webkit-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
	opacity:0;
	z-index:-1;
	overflow:hidden;
}

.sence0{
	background:url(start.jpg) no-repeat;
	background-size:100%;
	z-index:1;
}


.sence1{
	opacity:0;
	background:url(bg.jpg) no-repeat;
	background-size:100%;
}

.rabbitFront{
	position:absolute;
	top:8%;
	left:34%;
	width:32%;
}

.rabbitFront .rabbitHand{
	position:absolute;
	width:18.2%;
	top:65%;
	left:55.6%;
	z-index:999;
}

.rabbitFront .rabbitHand img{
	-webkit-transform-origin:50% 0;
	transform-origin:50% 0;
}

.rabbitBack{
	position:absolute;
	bottom:-5px;
	left:32%;
	width:34%;
	z-index:99;
}

.jumpLineCtxBox{
	position:absolute;
	width:100%;
	top:0;
	left:0;
	height:100%;
}

.jumpLineCtx,
.jumpLine2Ctx{
	position:absolute;
	width:100%;
	height:100%;
	left:0;
	top:0;
	background:none;
	z-index:9;
}

.jumpLineCtx{opacity:0;}

.jumpLine2Ctx{opacity:1;z-index:9;}

.jumpLineImg{
	position:absolute;
	top:28%;
	width:60%;
	left:24%;
}

.jumpLineImg img{
	position:absolute;
	left:0;
	top:0;
	display:none;
	z-index:9;
}

.tortoiseBox{
	position:absolute;
	width:100%;
	height:19.8%;
	top:52%;
	z-index:5;
}

.tortoiseBox img{
	position:absolute;
	left:0;
	top:0;
	width:100%;
}

.tortoise1 img,.tortoise2 img,.tortoise3 img,.tortoise4 img{
	display:none;
}


.tortoise1{
	position:absolute;
	width:20%;
	top:24%;
	right:-20%;
	-webkit-transition: all .5s linear;
	transition: all .5s linear;
	
}

@-webkit-keyframes tortoiseA1{
	0%{
		top:24%;
	}
	60%{
		top:0%;
	}
	100%{
		top:24%;
	}
}

@keyframes tortoiseA1{
	0%{
		top:24%;
	}
	60%{
		top:0%;
	}
	100%{
		top:24%;
	}
}


.tortoise2{
	position:absolute;
	width:20.2%;
	top:21%;
	right:-20.2%;
	-webkit-transition: all .5s linear;
	transition: all .5s linear;
}

@-webkit-keyframes tortoiseA2{
	0%{
		top:21%;
	}
	60%{
		top:-3%;
	}
	100%{
		top:21%;
	}
}

@keyframes tortoiseA2{
	0%{
		top:21%;
	}
	60%{
		top:-3%;
	}
	100%{
		top:21%;
	}
}

.tortoise3{
	position:absolute;
	width:27.3%;
	top:5%;
	right:-27.3%;
	-webkit-transition: all .5s linear;
	transition: all .5s linear;
}

@-webkit-keyframes tortoiseA3{
	0%{
		top:5%;
	}
	60%{
		top:-16%;
	}
	100%{
		top:5%;
	}
}

@keyframes tortoiseA3{
	0%{
		top:5%;
	}
	60%{
		top:-16%;
	}
	100%{
		top:5%;
	}
}

.tortoise4{
	position:absolute;
	width:20.2%;
	top:21%;
	right:-20.2%;
	-webkit-transition: all .5s linear;
	transition: all .5s linear;
}

@-webkit-keyframes tortoiseA4{
	0%{
		top:21%;
	}
	60%{
		top:-3%;
	}
	100%{
		top:21%;
	}
}

@keyframes tortoiseA4{
	0%{
		top:21%;
	}
	60%{
		top:-3%;
	}
	100%{
		top:21%;
	}
}

.scoreBox{
	position:absolute;
	width:90%;
	right:5%;
	top:1%;
	text-align:right;
}

.scoreBox img{
	width:4.68%;
}

.ctrlBox{
	position:absolute;
	width:100%;
	height:100%;
	z-index:999;
}

.gameEndBox{
	position:absolute;
	width:100%;
	left:0;
	top:0;
}

.mark{
	width:50%;
	text-align:left;
	position:absolute;
	top:42.8%;
	left:36%;
	line-height:1;
}

.mark img{
	width:9.24%;
}

.btn{
	position:absolute;
	width:30%;
	font-size:2em;
	top:77%;
	cursor:pointer;
}

.restartBtn{
	left:11.25%;
}

.shareBtn{
	right:11.25%;
}
.paihangBtn{
	top:87%;
	left:35.25%;
	}
.xinbuBtn{
	top:87%;
	right:11.25%;
		}
.bannerText{
	position:absolute;
	bottom:2%;
	left:0;
	width:100%;
	font-size:1.2em;
	color:#FD2D2D;
	text-align:center;
	text-shadow:0 0 10px #fff;
	box-shadow:0 0 10px #fff;
	-webkit-animation: bannerText 1s linear infinite;
	animation: bannerText 1s linear infinite;
	background:rgba(0255,255,255,0.2);
	z-index:9999;
}

@-webkit-keyframes bannerText{
	0%{
		text-shadow:0 0 10px #fff;
	}
	50%{
		text-shadow:0 0 30px #fff;
	}
	100%{
		text-shadow:0 0 10px #fff;
	}
}

@keyframes bannerText{
	0%{
		text-shadow:0 0 10px #fff;
	}
	50%{
		text-shadow:0 0 30px #fff;
	}
	100%{
		text-shadow:0 0 10px #fff;
	}
}

.bannerText .text{
	-webkit-transform:translate(0,0);
	transform:translate(0,0);
	-webkit-animation: btext 10s linear infinite;
	animation: btext 10s linear infinite;
}

@-webkit-keyframes btext{
	0%{
		color:#FD2D2D;
	}
	100%{
		color:#f64;
	}
}

@keyframes btext{
	0%{
		color:#FD2D2D;
	}
	100%{
		color:#f64;
	}
}