body{font-family: "微软雅黑"; overflow:hidden}
html, body {
	width: 100%;
	height: 100%;
}
p{ margin: 0; padding: 0; font-family: "微软雅黑";}
.BigBox{ width: 600px; height: 80px; position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;}
.tbox {
	width: 100%;
	position: absolute;
	left: 50%;
	transform: translateX(-20%);
}
.By{ width: 20px; height: 20px; background: red; animation:first 1s 246ms forwards, second 1s 312ms forwards; position: absolute; opacity: 0;}
.Ba{ width: 20px; height: 20px; background: yellow; margin-left: 20px; position: absolute; animation:first 1s 200ms forwards, second 0.9s 350ms forwards; opacity: 0;}
.Bb{ width: 20px; height: 20px; background: blue; margin-left: 40px; position: absolute; animation:first 1s 240ms forwards, second 0.8s 320ms forwards; opacity: 0;}
.Bc{ width: 20px; height: 20px; background: green; margin-left: 60px; position: absolute; animation:first 1s 320ms forwards, second 1.1s 280ms forwards; opacity: 0;}
.Bd{ width: 20px; height: 20px; background: orange; margin-left: 80px; position: absolute; animation:first 1s 260ms forwards, second 1.2s 300ms forwards; opacity: 0;}
.Be{ width: 20px; height: 20px; background: seagreen; margin-left: 100px; position: absolute; animation:first 1s 310ms forwards, second 1.2s 268ms forwards; opacity: 0;}
.Bf{ width: 20px; height: 20px; background: antiquewhite; margin-left: 120px; position: absolute; animation:first 1s 220ms forwards, second 1.3s 368ms forwards; opacity: 0;}
.Bh{ width: 20px; height: 20px; background: darkorange; margin-left: 140px; position: absolute; animation:first 1s 234ms forwards, second 1s 324ms forwards; opacity: 0;}
.Bi{ width: 20px; height: 20px; background: orangered; margin-left: 160px; position: absolute; animation:first 1s 200ms forwards, second 0.8s 350ms forwards; opacity: 0;}
.Bj{ width: 20px; height: 20px; background: pink; margin-left: 180px; position: absolute; animation:first 1s 240ms forwards, second 0.9s 320ms forwards; opacity: 0;}
.Bk{ width: 20px; height: 20px; background: palegoldenrod; margin-left: 200px; position: absolute; animation:first 1s 320ms forwards, second 1.2s 280ms forwards; opacity: 0;}
.Bl{ width: 20px; height: 20px; background: cornflowerblue; margin-left: 220px; position: absolute; animation:first 1s 260ms forwards, second 1.1s 300ms forwards; opacity: 0;}
.Bm{ width: 20px; height: 20px; background: cyan; margin-left: 240px; position: absolute; animation:first 1s 310ms forwards, second 0.9s 268ms forwards; opacity: 0;}

.Name{ margin-left:20px;color:dodgerblue;min-width: 220px; height: 54px; font-size: 35px; text-align: center; 
line-height: 54px; margin-top: 13px; position: absolute;animation:nleft 1.2s 1.2s forwards,nlefta 1s 2.5s forwards; opacity: 0;}
.Nline{ left: 50%;width: 3px; height: 28px;  margin-top: 28px; background: dodgerblue;position: absolute; 
animation: nmiddle 1.3s 1.3s forwards,prtant 2.5s 3.5s forwards,diff 2s 3.88s forwards; opacity: 0;}
.Nying{ color:dodgerblue;min-width: 220px; height: 54px;  font-size: 35px; text-align: center;position: absolute;
line-height: 54px; margin-top: 13px; animation:nright 1.2s 1.2s forwards,nrighta 1s 2.5s forwards; opacity: 0;}

@keyframes first{
	0%{ opacity: 0;}
	50%{ opacity: 0.5; margin-top: 50px;}
	100%{ margin-top: 50px; opacity: 1;}
}

@keyframes second{
	0%{ margin-top: 50px; opacity: 0;}
	20%{ margin-top: 40px; opacity: 0.5;}
	50%{ margin-top: 50px; opacity: 0.6;}
	100%{ margin-top: 0px; opacity: 0;}
}
@keyframes nleft{
	0%{ opacity: 0; margin-left: -30px;}
	100%{ opacity: 1; margin-left: 0px;}
}

@keyframes nlefta{
	0%{ opacity: 1; margin-left: 0px;}
	100%{ opacity: 0; margin-left: -30px;}
}


@keyframes nright{
	0%{ opacity: 0; right: -20px;}
	100%{ opacity: 1; right: 0;}
}

@keyframes nrighta{
	0%{ opacity: 1; right: 0px;}
	100%{ opacity: 0; right: -20px;}
}

@keyframes nmiddle{
	from{ opacity: 0; top: 20px;}
	to{ opacity: 1; top: 0;}
}

@keyframes prtant{
	10%{ transform: rotate(360deg);border-radius: 50%;}
	100%{width: 30px; height: 30px; top: 50%; left: 50%; margin-left: -15px; margin-top: -15px; transform: rotate(360deg);border-radius: 50%;}
}

@keyframes diff{
	0%{width: 30px; height: 30px; top: 50%; left: 50%; margin-left: -15px; margin-top: -15px; transform: rotate(360deg);border-radius: 50%;}
	100%{height: 3000px; width: 3000px; top: 50%; left: 50%; margin-top: -1500px; margin-left: -1500px; border-radius: 50%;border-radius: 50%;
	background:-webkit-gradient(linear, 0 0, 0 bottom, from(#bea881), to(white));   }
	
}