/*第一层*/
@keyframes animX {
	0% {
		left: 0px;
	}

	100% {
		left: 2000px;
	}
}

@keyframes animY {
	0% {
		top: 0px;
	}

	100% {
		top: 1200px;
	}
}

@keyframes scale {

	0% {
		transform: scale(0.4);
		z-index: 0
	}

	50% {
		transform: scale(1);
		z-index: 3
	}

	100% {
		transform: scale(0.5);
		z-index: 0
	}
}


.ball {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 3;
	/*动画执行一次所需时间*/
	animation-duration: 10s, 10s, 20s;
	/*动画以何种运行轨迹完成一个周期*/
	animation-timing-function: cubic-bezier(0.36, 0, 0.64, 1);
	/*动画播放次数,无线循环播放*/
	animation-iteration-count: infinite;
	/*是否轮流反向播放动画 alternate:正向播放*/
	animation-direction: alternate;
	animation-name: animX, animY, scale;
}

#lopp {
	width: 500px;
	height: 300px;
	border: 2px solid #999;
	border-radius: 50%;
	position: absolute;
	left: 50px;
	top: 70px;
}

/*第二层*/
@keyframes anim2X {
	0% {
		left: 0px;
	}

	100% {
		left: 800px;
	}
}

@keyframes anim2Y {
	0% {
		top: 0px;
	}

	100% {
		top: 500px;
	}
}

.ball2 {
	z-index: 3;
	width: 400px;
	height: 400px;
	border-radius: 50%;
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	/*line-height: 120px;*/
	/*动画执行一次所需时间*/
	animation-duration: 10s, 10s, 20s;
	/*动画以何种运行轨迹完成一个周期*/
	animation-timing-function: cubic-bezier(0.36, 0, 0.64, 1);
	/*动画播放次数,无线循环播放*/
	animation-iteration-count: infinite;
	/*是否轮流反向播放动画 alternate:正向播放*/
	animation-direction: alternate;
	animation-name: anim2X, anim2Y, scale;
}

.ball2 img {
	display: block;
	width: 100%;
}

#lopp2 {
	width: 900px;
	height: 500px;
	border: 3px dashed #ccc;
	border-radius: 50%;
	position: absolute;
	left: 160px;
	top: 220px;
}

.circle {
	position: absolute;
	top: 100px;
	left: 350px;
	width: 500px;
	height: 500px;
	z-index: 3;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	cursor: pointer;
}

.circle img {
	display: block;
	margin: 0 auto;
	/* width: 100%; */
}

.ball_con {
	position: relative;
	width: 100%;
	height: 950px;
	margin-top: -80px;
}

.ball_con .con {
	position: absolute;
	left: 50%;
	top: 0;
	width: 1200px;
	transform: translateX(-48%) scale(1);
}

.container {
	position: relative;
	transform: rotateX(20deg);
}