@import '../css/index.css';

#option-box {
  width: 42vw;
  height: 10vw;
  position: absolute;
  left: 40vw;
  top: 7.8vw;
}
#option-box div {
  width: 18vw;
  height: 9vw;
  color: #fedf50;
  text-align: center;
  line-height: 10vw;
  cursor: pointer;
  background: url(../wo-niu-pa/images/option.png) center no-repeat;
  background-size: contain;
}
#option-box div:nth-child(1) {
  position: absolute;
  left: -4vw;
  top: 2.5vw;
}
#option-box div:nth-child(2) {
  position: absolute;
  left: 11.5vw;
  top: -0.5vw;
}
#option-box div:nth-child(3) {
  position: absolute;
  left: 28vw;
  top: 0.6vw;
}
#option-box div img {
  width: 10vw;
}

/* 播放按钮 */
#audio-btn {
  width: 9vw;
  position: absolute;
  left: 10vw;
  top: 24vw;
  cursor: pointer;
}

/* 蜗牛 */
#snail {
  width: 10vw;
  position: absolute;
  left: 7vw;
  top: 40.5vw;
  /* opacity: 0; */
}
.snail-climb {
  animation: snailClimb 3s linear forwards;
}
@keyframes snailClimb {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  30% {
    opacity: 1;
    transform: translate3d(40%, -40%, 0) rotate(-45deg);
  }
  80% {
    opacity: 1;
    transform: translate3d(90%, -260%, 0) rotate(-60deg);;
  }
  98% {
    opacity: 1;
    transform: translate3d(130%, -360%, 0) rotate(-60deg);;
  }
  100% {
    opacity: 1;
    transform: translate3d(130%, -360%, 0) rotate(0);;
  }
}
.snail-down {
  animation: snailDown 3s linear forwards;
}
@keyframes snailDown {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  30% {
    opacity: 1;
    transform: translate3d(40%, -40%, 0) rotate(-45deg);
  }
  80% {
    opacity: 1;
    transform: translate3d(90%, -250%, 0) rotate(-90deg);
  }
  100% {
    opacity: 1;
    transform: translate3d(90%, 290%, 0) rotate(-90deg);
  }
}