* {
	margin:0;
	padding:0;
}
body,html {
	height:100%;
	background:url(images/xk.jpg) no-repeat;
	background-size:cover;
	background-color: #222455;
} 
.wrap {
	width:600px;
	height:600px;
	position:fixed;
	left:0;
	top:0;
	right:0;
	bottom:0;
	margin:auto;
	/* 	border:3px solid #fff;
	*/
				transform-style:preserve-3d;
}
.box01 {
	width:200px;
	height:200px;
	position:absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	margin:auto;
	transform-style:preserve-3d;
	animation:gogogo 10s linear infinite;
}
.circle span {
	position:absolute;
	left:0;
	top:0;
	width:200px;
	height:200px;
	border-radius:50%;
	border:1px solid #fcff12;
	box-shadow:0px 0px 10px rgba(252,255,18,0.5);
}
.circle span:nth-child(2) {
	transform:rotateX(40deg);
}
.circle span:nth-child(3) {
	transform:rotateX(80deg);
}
.circle span:nth-child(4) {
	transform:rotateX(120deg);
}
.circle span:nth-child(5) {
	transform:rotateX(160deg);
}
.circle span:nth-child(6) {
	transform:rotateX(200deg);
}
.circle span:nth-child(7) {
	transform:rotateX(240deg);
}
.circle span:nth-child(8) {
	transform:rotateX(280deg);
}
.circle span:nth-child(9) {
	transform:rotateX(320deg);
}
.circle span:nth-child(10) {
	transform:rotateY(40deg);
}
.circle span:nth-child(11) {
	transform:rotateY(80deg);
}
.circle span:nth-child(12) {
	transform:rotateY(120deg);
}
.circle span:nth-child(13) {
	transform:rotateY(160deg);
}
.circle span:nth-child(14) {
	transform:rotateY(200deg);
}
.circle span:nth-child(15) {
	transform:rotateY(240deg);
}
.circle span:nth-child(16) {
	transform:rotateY(280deg);
}
.circle span:nth-child(17) {
	transform:rotateY(320deg);
}
.box02 {
	width:450px;
	height:450px;
	position:absolute;
	left:0;
	top:60px;
	right:0;
	bottom:0;
	margin:auto;
	transform-style:preserve-3d;
	border:5px solid #fff;
	border-radius:50%;
	box-shadow:3px 3px 50px rgba(255,255,255,1);
	transform:rotateX(61deg) rotateY(-16deg);
	animation:gogogo 10s linear infinite;
}
.box02 span {
	top:0;
	left:70px;
	width:60px;
	height:60px;
	border:1px solid #02ff3e;
	box-shadow:0px 0px 10px rgba(2,255,62,0.5);
}
.box03 {
	width:650px;
	height:650px;
	position:absolute;
	left:-18px;
	top:80px;
	right:0;
	bottom:0;
	margin:auto;
	transform-style:preserve-3d;
	border:5px solid #fff;
	border-radius:50%;
	box-shadow:3px 3px 50px rgba(255,255,255,1);
	transform:rotateX(61deg) rotateY(-16deg);
	animation:gogogo 15s linear infinite;
}
.box03 span {
	top:0;
	left:450px;
	width:100px;
	height:100px;
	border:1px solid #2c76ff;
	box-shadow:0px 0px 10px rgba(44,118,255,0.5);
}
.box04 {
	width:850px;
	height:850px;
	position:absolute;
	left:-108px;
	top:100px;
	right:0;
	bottom:0;
	margin:auto;
	transform-style:preserve-3d;
	border:5px solid #fff;
	border-radius:50%;
	box-shadow:3px 3px 50px rgba(255,255,255,1);
	transform:rotateX(61deg) rotateY(-16deg);
	animation:gogogo 20s linear infinite;
}
.box04 span {
	top:760px;
	left:450px;
	width:150px;
	height:150px;
	border:1px solid #ff4f74;
	box-shadow:0px 0px 10px rgba(255,79,155,0.5);
}
@keyframes gogogo {
	0% {
	transform:rotateX(61deg) rotateY(-16deg) rotateZ(0deg);
}
100% {
	transform:rotateX(61deg) rotateY(-16deg) rotateZ(360deg);
}
}