/* 标题 */
.title {
  width: 29%;
  position: absolute;
  left: 2%;
  top: 3%;
  z-index: 9;
  pointer-events: none;
}
/* 标题end */

/* 松鼠 */
.zip {
  width: 25%;
  position: absolute;
  right: 10%;
  top: 20%;
  animation: zipInto 2s forwards;
}
.light {
  width: 30%;
  position: absolute;
  left: -2%;
  top: -7%;
  opacity: 0;
  animation: lightShow 1s 2s forwards;
}
@keyframes zipInto {
  0% {
    transform: translate3d(150%, 50%, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes lightShow {
  0% {
    transform: scale(0.7);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
/* 松鼠end */

/* 水珠 */
.drops {
  width: 35%;
  height: 30%;
  position: absolute;
  top: 47%;
  left: 50%;
  transform: translateX(-50%);
}
.drops img {
  width: 5%;
  position: absolute;
}
.drops img:nth-child(1) {
  animation: dropsFloat 4s infinite;
  left: 37%;
  top: 35%;
}
.drops img:nth-child(2) {
  animation: dropsFloat 3s infinite;
  left: 90%;
  top: 0%;
}
@keyframes dropsFloat {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  50% {
    opacity: 1;
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
/* 水珠end */

/* 词句按钮 */
.j {
  width: 24%;
  height: 50%;
  background: url('../images/cj/drop.png') center no-repeat;
  background-size: contain;
  position: absolute;
  left: 28.5%;
  top: 5%;
  display: block;
  animation: jChange 1s forwards;
  opacity: 0;
}
.c {
  width: 21%;
  height: 51%;
  background: url('../images/cj/drop2.png') center no-repeat;
  background-size: contain;
  position: absolute;
  left: 51%;
  top: -3%;
  display: block;
  animation: cChange 1s forwards;
  opacity: 0;
}
.j img {
  width: 50%;
  position: absolute;
  left: 26%;
  top: 30%;
}
.c img {
  width: 55%;
  position: absolute;
  left: 23%;
  top: 33%;
}
.j:hover img, .c:hover img{
  animation: rubberBand 1s linear;
}
@keyframes jChange {
  0% {
    transform: translate3d(-20%, -20%, 0) scale(0.5);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
  }
}
@keyframes cChange {
  0% {
    transform: translate3d(0, -15%, 0) scale(0.5);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
  }
}
/* 词句按钮end */