/*第一层*/
@keyframes animX {
  0% {
    left: 5%;
  }
  100% {
    left: 82%;
  }
}
@keyframes animY {
  0% {
    top: -20%;
  }
  100% {
    top: 71%;
  }
}
@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: 156px;
  height: 196px;
  position: absolute;
  text-align: center;
  cursor: pointer;
  font-size: 16px;
  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 .layText {
  position: absolute;
  left: 70%;
  bottom: 180px;
  width: 220px;
  z-index: 3;
  padding: 20px;
  text-align: left;
  font-size: 16px;
  background: #c7d1fa;
  display: none;
}
.ball.show .layText {
  display: block;
}
.ball p {
  display: block;
  color: #000;
}
#lopp {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
/*鼠标进入停止*/
.active {
  animation-play-state: paused;
}