web-test/public/static/home/css/road.css

/* CSS Document */
/**
* +----------------------------------------------------------
* 主样式
* +----------------------------------------------------------
*/
.layui-form-checkbox[lay-skin=primary]:hover i{
  border-color: #407CD5;
}
.layui-form-checked[lay-skin=primary] i{
  background-color: #407CD5;
  border-color: #407CD5;
}

.layui-btn{
    height: 45px;
    line-height: 45px;
}
.layui-btn-normal{
  background-color: #407CD5;
}


/*流星*/
.liuxing{
  width: 85px;
	height: 85px;
	position: absolute;
	background: url(../../home/images/line.png) no-repeat;
	background-size: contain;
}
.liuxing1 {
  top: 200px;
	left: 200px;
}

.liuxing2 {
  top: 200px;
	left: 50%;
	margin-left: 200px;
}

.liuxing3 {
  top: 100px;
	right: 300px;
}

.liuxing4 {
  top: 150px;
	right: 300px;
}

.liuxingFla {
	animation: liuxing 5s ease-in infinite;
}

.liuxingFla2 {
	animation: liuxing2 4s ease-in infinite;
}

.liuxingFla3 {
	animation: liuxing3 3s linear infinite;
}

.liuxingFla4 {
	animation: liuxing4 2s linear infinite;
}

/* 流星动画 */
@keyframes liuxing {
	0% {
		transform: translate(200px, -200px)
	}
	90% {
		transform: translate(-180px, 180px);
		opacity: 1;
	}
	100% {
		transform: translate(-200px, 200px);
		opacity: 0;
	}
}

@keyframes liuxing2 {
	0% {
		transform: translate(200px, -200px)
	}
	90% {
		transform: translate(-480px, 480px);
		opacity: 1;
	}
	100% {
		transform: translate(-500px, 500px);
		opacity: 0;
	}
}

@keyframes liuxing3 {
	0% {
		transform: translate(200px, -200px)
	}
	90% {
		transform: translate(-480px, 480px);
		opacity: 1;
	}
	100% {
		transform: translate(-500px, 500px);
		opacity: 0;
	}
}

@keyframes liuxing4 {
	0% {
		transform: translate(200px, -200px)
	}
	90% {
		transform: translate(-180px, 180px);
		opacity: 1;
	}
	100% {
		transform: translate(-200px, 200px);
		opacity: 0;
	}
}

/*菜单*/
.moveUpDownFla1 {
	animation: moveUpDown 5s ease infinite;
}

.moveUpDownFla2 {
	animation: moveUpDown 4s linear infinite;
}

/* 菜单动画 */
@keyframes moveUpDown {
	0% {
		transform: translate(0px, -20px)
	}
	50% {
		transform: translate(0px, 20px)
	}
	100% {
		transform: translate(0px, -20px);
	}
}