/*第一层*/

@keyframes animX{
  0% {
    left: 0px;
  }
  100% {
    left:75%;
  }
}
@keyframes animY{
  0% {
    top: 10vh;
  }
  100% {
    top: 60vh;
  }
}
@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 {
  width: 320px;
  height: 210px;
  /*background-color: #f66;*/
  border-radius: 50%;
  position: absolute;
  color:#fff;
  font-size:22px;
  display:flex;
  align-items:center;
  justify-content:center;
/*  background: yellow;*/
  background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  line-height: 120px;
  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;
}
.ball img{width: 100%;}
#lopp {
  width: 1200px;
  height: 300px;
/*  border: 2px solid #999;*/
  border-radius: 50%;
  position: absolute;
  left: 0px;
  top: 0px;
}
/*鼠标进入停止*/
.active {
  animation-play-state: paused;
}
/*第二层*/
@keyframes anim2X{
  0% {
    left: 100px;
  }
  100% {
    left: 420px;
  }
}
@keyframes anim2Y{
  0% {
    top: 70px;
  }
  100% {
    top: 200px;
  }
}
.ball2 {
  z-index: 3;
  width: 88px;
  height: 88px;
  /*background-color: #f66;*/
  border-radius: 50%;
  position: absolute;
  color:#fff;
  font-size:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: red;
  background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  /*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;
}
#lopp2 {
  width: 300px;
  height: 150px;
  border: 2px solid #999;
  border-radius: 50%;
  position: absolute;
  left: 150px;
  top: 120px;
}
.circle {
  position: absolute;
  top: 114px;
  left: 250px;
  background: red;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  z-index: 3;
  color: #fff;
  font-size: 16px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  cursor: pointer;
  background: lightgreen;
  background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
}
.container {
position: relative;
transform: rotateX(20deg);
  width: 90%;
/*  height: 800px;*/
  margin: 0 auto;margin-top: -100px
}