gmh_web/public/css/style.css

.loading-bg {
	background-color: #f4c042;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: -100;
}

.box {
	width: 306px;
	height: 300px;
	margin: 300px auto 0;
	background: url(../img/1.png) no-repeat left bottom;
	position: relative;
}

.sun {
	width: 136px;
	height: 136px;
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	top: 135px;
	z-index: -1;
	animation: move 2.7s infinite linear;
}

.sun .eye {
	position: absolute;
	top: 43%;
	left: 30%;
	animation: eye 2.7s infinite linear;
}

.sun .sunbody {
	animation: scroll 2.7s infinite linear;
}

.box p {
	text-align: center;
	padding-top: 230px;
	font-family: '苹方';
	font-size: 25px;
	color: #7a5600;
	animation: opp 2.7s infinite linear;
}

@keyframes move {
	0% {
		transform: translateY(0);
	}

	10% {
		transform: translateY(0);
	}

	40% {
		transform: translateY(-40px);
	}

	70% {
		transform: translateY(-40px);
	}

	100% {
		transform: translateY(0);
	}
}

@keyframes scroll {
	0% {
		transform: rotate(0);
	}

	40% {
		transform: rotate(0);
	}

	50% {
		transform: rotate(45deg);
	}

	60% {
		transform: rotate(45deg);
	}

	100% {
		transform: rotate(45deg);
	}
}

@keyframes eye {
	0% {
		transform: translateX(0px);
	}

	50% {
		transform: translateX(0px) scale(1, 1);
	}

	55% {
		transform: translateX(0px) scale(1, 0.1);
	}

	60% {
		transform: translateX(0px) scale(1);
	}

	70% {
		transform: translateX(30px);
	}

	100% {
		transform: translateX(30px);
	}
}

@keyframes opp {
	0% {
		opacity: 1;
	}

	40% {
		opacity: 1;
	}

	60% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}