就是爱玩打地鼠

* {
	margin:0;
	padding:0;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
html,body {
	height:100%;
}
body {
	background:#000;
	font-family:sans-serif;
}
.window {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background:#000;
	z-index:999;
	-webkit-transition:opacity 0.6s;
	transition:opacity 0.6s;
}
.window h1,.window h2,.window p {
	color:#fff;
	text-align:center;
}
.window h2 {
	margin-top:100px;
	margin-bottom:10px;
}
.window .meta {
	margin-top:50px;
	opacity:0.6;
}
.window h1 {
	line-height:50px;
}
.window .btn-group {
	margin:80px auto;
	width:100px;
	height:90px;
	overflow:hidden;
	position:relative;
}
.window .gopher {
	position:relative;
	top:6px;
	left:0;
	margin:0 auto;
}
.window label {
	display:block;
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:40px;
	background:#51a70d;
	color:#fff;
	text-align:center;
	line-height:40px;
	cursor:pointer;
	border-bottom:4px solid #62b210;
	border-radius:4px;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
}
#end {
	opacity:0;
	pointer-events:none;
	-webkit-pointer-events:none;
}
#startFlag {
	position:absolute;
	top:-10px;
	left:-10px;
}
#startFlag:checked + #start {
	opacity:0;
	pointer-events:none;
	-webkit-pointer-events:none;
}
#container {
	background:-webkit-linear-gradient(top,#8adcf7 0%,#bbe8fd 100%);
	background:linear-gradient(to bottom,#8adcf7 0%,#bbe8fd 100%);
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-300px;
	margin-top:-300px;
	width:600px;
	height:600px;
	border:1px solid #000;
	overflow:hidden;
}
#map {
	position:absolute;
	bottom:0;
	left:-600px;
	width:1800px;
	height:800px;
	-webkit-transform:perspective(600px) rotateX(45deg);
	transform:perspective(600px) rotateX(45deg);
	-webkit-transform-origin:center bottom;
	-ms-transform-origin:center bottom;
	transform-origin:center bottom;
}
.map {
	width:5%;
	height:100%;
	float:left;
}
.map:nth-child(even) {
	background:#62b210;
}
.map:nth-child(odd) {
	background:#51a70d;
}
.hole {
	position:absolute;
	left:0;
	top:70px;
	width:68px;
	height:100px;
	background-image:-webkit-linear-gradient(left,#2a7d2f 0%,#78fc73 25%,#78fc73 35%,#113e15 95%);
	background-image:linear-gradient(to right,#2a7d2f 0%,#78fc73 25%,#78fc73 35%,#113e15 95%);
	border-left:1px solid #236d22;
	box-shadow:0px 2px 5px 0px rgba(0,0,0,0.6);
}
.hole:before {
	display:block;
	content:'';
	position:absolute;
	width:84px;
	height:24px;
	margin-left:-8px;
	top:-24px;
	background-image:-webkit-linear-gradient(top,rgba(255,255,255,0) 1px,rgba(255,255,255,0.3) 2px,rgba(255,255,255,0.3) 3px,rgba(255,255,255,0) 4px),-webkit-linear-gradient(bottom,rgba(0,0,0,0.4) 3px,rgba(255,255,255,0.2) 5px,rgba(255,255,255,0) 6px),-webkit-linear-gradient(left,#2a7d2f 0%,#78fc73 25%,#78fc73 35%,#113e15 95%);
	background-image:linear-gradient(to bottom,rgba(255,255,255,0) 1px,rgba(255,255,255,0.3) 2px,rgba(255,255,255,0.3) 3px,rgba(255,255,255,0) 4px),linear-gradient(to top,rgba(0,0,0,0.4) 3px,rgba(255,255,255,0.2) 5px,rgba(255,255,255,0) 6px),linear-gradient(to right,#2a7d2f 0%,#78fc73 25%,#78fc73 35%,#113e15 95%);
	border-radius:2px;
}
.gopher {
	z-index:0;
	position:absolute;
	display:block;
	top:70px;
	left:7px;
	width:56px;
	height:100px;
	border-radius:20px;
	background:#e3c498;
	background-image:-webkit-radial-gradient(20px 23px,circle,#000000 5%,rgba(255,255,255,0) 5%),-webkit-radial-gradient(17px 20px,circle,#ffffff 10%,rgba(255,255,255,0) 10%),-webkit-radial-gradient(40px 23px,circle,#000000 5%,rgba(255,255,255,0) 5%),-webkit-radial-gradient(43px 20px,circle,#ffffff 10%,rgba(255,255,255,0) 10%),-webkit-radial-gradient(center 36px,circle,#000000 8%,rgba(255,255,255,0) 8%),-webkit-radial-gradient(center 48px,circle,#ffffff 20%,rgba(255,255,255,0) 20%);
	background-image:radial-gradient(circle at 20px 23px,#000000 5%,rgba(255,255,255,0) 5%),radial-gradient(circle at 17px 20px,#ffffff 10%,rgba(255,255,255,0) 10%),radial-gradient(circle at 40px 23px,#000000 5%,rgba(255,255,255,0) 5%),radial-gradient(circle at 43px 20px,#ffffff 10%,rgba(255,255,255,0) 10%),radial-gradient(circle at center 36px,#000000 8%,rgba(255,255,255,0) 8%),radial-gradient(circle at center 48px,#ffffff 20%,rgba(255,255,255,0) 20%);
	-webkit-appearance:button;
	-moz-apperance:button;
	appearance:button;
	cursor:pointer;
	border:none;
	outline:none;
	-webkit-animation-iteration-count:infinite;
	animation-iteration-count:infinite;
}
.gopher:before,.gopher:after {
	z-index:-1;
	content:'';
	left:-5px;
	top:-5px;
	width:20px;
	height:20px;
	position:absolute;
	background:#e3c498;
	border-radius:50%;
	background-image:-webkit-radial-gradient(center,circle,#000000 40%,rgba(255,255,255,0) 40%);
	background-image:radial-gradient(circle at center,#000000 40%,rgba(255,255,255,0) 40%);
}
.gopher:after {
	left:auto;
	right:-5px;
}
.gopher--not-button {
	-webkit-appearance:none;
	-moz-apperance:none;
	appearance:none;
}
.group {
	position:absolute;
	z-index:1;
}
.group:nth-child(1) {
	left:45px;
	top:210px;
}
.group:nth-child(2) {
	left:165px;
	top:270px;
}
.group:nth-child(3) {
	left:345px;
	top:250px;
}
.group:nth-child(4) {
	left:80px;
	top:370px;
}
.group:nth-child(5) {
	left:400px;
	top:410px;
}
.group:nth-child(6) {
	left:470px;
	top:230px;
}
.gopher:checked {
	-webkit-animation-name:none;
	animation-name:none;
	pointer-events:none;
	-webkit-pointer-events:none;
	opacity:0;
	overflow:hidden;
}
.gopher1 {
	-webkit-animation-name:gopher1;
	animation-name:gopher1;
	-webkit-animation-delay:2s;
	animation-delay:2s;
	-webkit-animation-duration:10s;
	animation-duration:10s;
}
@-webkit-keyframes gopher1 {
	0% {
	top:70px;
}
10% {
	top:0;
}
15% {
	top:0;
}
20% {
	top:70px;
}
100% {
	top:70px;
}
}@keyframes gopher1 {
	0% {
	top:70px;
}
10% {
	top:0;
}
15% {
	top:0;
}
20% {
	top:70px;
}
100% {
	top:70px;
}
}.gopher2 {
	-webkit-animation-name:gopher2;
	animation-name:gopher2;
	-webkit-animation-delay:2s;
	animation-delay:2s;
	-webkit-animation-duration:10s;
	animation-duration:10s;
}
@-webkit-keyframes gopher2 {
	0% {
	top:70px;
}
30% {
	top:70px;
}
60% {
	top:0;
}
70% {
	top:0;
}
90% {
	top:0;
}
}@keyframes gopher2 {
	0% {
	top:70px;
}
30% {
	top:70px;
}
60% {
	top:0;
}
70% {
	top:0;
}
90% {
	top:0;
}
}.gopher3 {
	-webkit-animation-name:gopher3;
	animation-name:gopher3;
	-webkit-animation-delay:0s;
	animation-delay:0s;
	-webkit-animation-duration:5s;
	animation-duration:5s;
}
@-webkit-keyframes gopher3 {
	0% {
	top:70px;
}
30% {
	top:70px;
}
60% {
	top:0;
}
70% {
	top:0;
}
90% {
	top:70px;
}
}@keyframes gopher3 {
	0% {
	top:70px;
}
30% {
	top:70px;
}
60% {
	top:0;
}
70% {
	top:0;
}
90% {
	top:70px;
}
}.gopher4 {
	-webkit-animation-name:gopher4;
	animation-name:gopher4;
	-webkit-animation-delay:2s;
	animation-delay:2s;
	-webkit-animation-duration:8s;
	animation-duration:8s;
}
@-webkit-keyframes gopher4 {
	0% {
	top:70px;
}
10% {
	top:70px;
}
15% {
	top:0;
}
30% {
	top:70px;
}
}@keyframes gopher4 {
	0% {
	top:70px;
}
10% {
	top:70px;
}
15% {
	top:0;
}
30% {
	top:70px;
}
}.gopher5 {
	-webkit-animation-name:gopher5;
	animation-name:gopher5;
	-webkit-animation-delay:0s;
	animation-delay:0s;
	-webkit-animation-duration:10s;
	animation-duration:10s;
}
@-webkit-keyframes gopher5 {
	0% {
	top:70px;
}
70% {
	top:70px;
}
80% {
	top:0;
}
90% {
	top:70px;
}
}@keyframes gopher5 {
	0% {
	top:70px;
}
70% {
	top:70px;
}
80% {
	top:0;
}
90% {
	top:70px;
}
}.gopher6 {
	-webkit-animation-name:gopher6;
	animation-name:gopher6;
	-webkit-animation-delay:4s;
	animation-delay:4s;
	-webkit-animation-duration:6s;
	animation-duration:6s;
}
@-webkit-keyframes gopher6 {
	0% {
	top:70px;
}
70% {
	top:70px;
}
90% {
	top:0;
}
100% {
	top:70px;
}
}@keyframes gopher6 {
	0% {
	top:70px;
}
70% {
	top:70px;
}
90% {
	top:0;
}
100% {
	top:70px;
}
}.gopher7 {
	-webkit-animation-name:gopher7;
	animation-name:gopher7;
	-webkit-animation-delay:2s;
	animation-delay:2s;
	-webkit-animation-duration:6s;
	animation-duration:6s;
}
@-webkit-keyframes gopher7 {
	0% {
	top:70px;
}
20% {
	top:70px;
}
25% {
	top:0;
}
35% {
	top:70px;
}
}@keyframes gopher7 {
	0% {
	top:70px;
}
20% {
	top:70px;
}
25% {
	top:0;
}
35% {
	top:70px;
}
}.gopher8 {
	-webkit-animation-name:gopher8;
	animation-name:gopher8;
	-webkit-animation-delay:0s;
	animation-delay:0s;
	-webkit-animation-duration:8s;
	animation-duration:8s;
}
@-webkit-keyframes gopher8 {
	0% {
	top:70px;
}
50% {
	top:70px;
}
60% {
	top:0;
}
70% {
	top:70px;
}
}@keyframes gopher8 {
	0% {
	top:70px;
}
50% {
	top:70px;
}
60% {
	top:0;
}
70% {
	top:70px;
}
}.gopher9 {
	-webkit-animation-name:gopher9;
	animation-name:gopher9;
	-webkit-animation-delay:0s;
	animation-delay:0s;
	-webkit-animation-duration:10s;
	animation-duration:10s;
}
@-webkit-keyframes gopher9 {
	0% {
	top:70px;
}
10% {
	top:70px;
}
20% {
	top:0;
}
40% {
	top:70px;
}
}@keyframes gopher9 {
	0% {
	top:70px;
}
10% {
	top:70px;
}
20% {
	top:0;
}
40% {
	top:70px;
}
}.gopher10 {
	-webkit-animation-name:gopher10;
	animation-name:gopher10;
	-webkit-animation-delay:2s;
	animation-delay:2s;
	-webkit-animation-duration:8s;
	animation-duration:8s;
}
@-webkit-keyframes gopher10 {
	0% {
	top:70px;
}
40% {
	top:70px;
}
55% {
	top:0;
}
65% {
	top:70px;
}
}@keyframes gopher10 {
	0% {
	top:70px;
}
40% {
	top:70px;
}
55% {
	top:0;
}
65% {
	top:70px;
}
}.gopher11 {
	-webkit-animation-name:gopher11;
	animation-name:gopher11;
	-webkit-animation-delay:0s;
	animation-delay:0s;
	-webkit-animation-duration:10s;
	animation-duration:10s;
}
@-webkit-keyframes gopher11 {
	0% {
	top:70px;
}
40% {
	top:70px;
}
50% {
	top:0;
}
60% {
	top:70px;
}
}@keyframes gopher11 {
	0% {
	top:70px;
}
40% {
	top:70px;
}
50% {
	top:0;
}
60% {
	top:70px;
}
}.gopher12 {
	-webkit-animation-name:gopher12;
	animation-name:gopher12;
	-webkit-animation-delay:3s;
	animation-delay:3s;
	-webkit-animation-duration:6s;
	animation-duration:6s;
}
@-webkit-keyframes gopher12 {
	0% {
	top:70px;
}
30% {
	top:70px;
}
50% {
	top:0;
}
55% {
	top:70px;
}
}@keyframes gopher12 {
	0% {
	top:70px;
}
30% {
	top:70px;
}
50% {
	top:0;
}
55% {
	top:70px;
}
}#startFlag:checked ~ .points {
	top:20px;
}
.points {
	-webkit-transition:top 1s;
	transition:top 1s;
	position:absolute;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
	top:-100px;
	left:50%;
	width:100px;
	height:48px;
	margin-left:-50px;
	background:rgba(0,0,0,0.2);
	border:4px solid #ffffff;
	border-radius:4px;
	color:#fff;
}
.points .points-viewport {
	overflow:hidden;
	height:40px;
	width:100%;
}
.points .points-list {
	position:relative;
	top:-480px;
}
.points input {
	display:block;
	height:40px;
	-webkit-transition:1s;
	transition:1s;
}
.points input:checked {
	height:0;
}
.points ul {
	list-style:none;
	padding:0;
	margin:0;
}
.points li {
	display:block;
	height:40px;
	text-align:center;
	font-size:30px;
	font-weight:bold;
	cursor:default;
}
.time-wrapper {
	position:absolute;
	left:-150px;
	top:20px;
	-webkit-transition:1s;
	transition:1s;
}
.time-wrapper p {
	color:#fff;
	line-height:24px;
}
.time {
	border:2px solid #fff;
	width:140px;
	height:20px;
}
.time .progress {
	height:16px;
	width:0;
}
#startFlag:checked ~ .time-wrapper .progress {
	-webkit-animation:progress 15s linear 0s forwards;
	animation:progress 15s linear 0s forwards;
}
#startFlag:checked ~ #end {
	-webkit-animation:end 16s linear 0s forwards;
	animation:end 16s linear 0s forwards;
}
#startFlag:checked ~ .time-wrapper {
	left:20px;
}
@-webkit-keyframes progress {
	from {
	width:0;
	background:#00ff00;
}
to {
	width:136px;
	background:#ff0000;
}
}@keyframes progress {
	from {
	width:0;
	background:#00ff00;
}
to {
	width:136px;
	background:#ff0000;
}
}#end {
	top:-800px;
	opacity:1;
	display:block;
	border-bottom:2px solid #fff;
}
#end .gopher {
	position:absolute;
	left:50%;
	top:auto;
	margin-left:-30px;
	bottom:-54px;
}
@-webkit-keyframes end {
	from {
	top:-800px;
}
95% {
	top:-800px;
}
to {
	top:0;
}
}@keyframes end {
	from {
	top:-800px;
}
95% {
	top:-800px;
}
to {
	top:0;
}
}