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

/* 选项 */
#options {
  width: 75%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  position: absolute;
  bottom: 10vw;
  left: 13vw;
}
#options li {
  width: 9vw;
  margin: 0 0.5vw;
  cursor: pointer;
}
#options li img {
  width: 100%;
}

/* 炮台 */
.battery {
  width: 12vw;
  height: 9vw;
  position: absolute;
  left: 50%;
  top: 5vw;
  transform: translateX(-50%);
  background: url('./images/battery.png') center no-repeat;
  background-size: cover;
}
#word {
  position: absolute;
  left: 50%;
  top: 4vw;
  transform: translateX(-50%);
}
#gun {
  width: 5vw;
  position: absolute;
  left: 50%;
  top: 11vw;
  transform-origin: 50% -2vw;
  transform: translateX(-50%) rotateZ(30deg);
  transition: transform 1s;
}
#shell {
  width: 4vw;
  position: absolute;
  left: 49vw;
  top: 7vw;
  /* transition-property: left,top;
  transition-duration: 1s;
  -ms-transition-property: left,top;
  -ms-transition-duration: 1s; */
  /* -ms-transition: all 1s */
}

/* 网 */
#net {
  width: 13vw;
  position: absolute;
  /* left: 55vw;
  top: 29vw; */
  animation: net 1s forwards;
  display: none;
}
@keyframes net {
  0% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1);
  }
}

/* 鱼 */
.fish {
  width: 40vw;
  position: absolute;
  top: 15vw;
  right: -40vw;
  animation: swim 15s infinite linear;
}
@keyframes swim {
  0% {
    transform: translate3d(0, 0,0) rotateY(0);
  }
  49% {
    transform: translate3d(-140vw, 0,0) rotateY(0);
  }
  51% {
    transform: translate3d(-140vw, 0,0) rotateY(180deg);
  }
  100% {
    transform: translate3d(0, 0,0) rotateY(180deg);
  }
}

/* 泡泡 */
.bubble-box {
  width: 80vw;
  height: 20vw;
  position: absolute;
  top: 12vw;
  left: 10vw;
}
.bubble1 {
  width: 5vw;
  position: absolute;
  right: 7vw;
  bottom: 0;
  animation: bubble1 4s infinite linear;
}
.bubble2 {
  width: 5vw;
  position: absolute;
  right: 7vw;
  bottom: 0;
  animation: bubble1 4s 2s infinite linear;
}
.bubble3 {
  width: 5vw;
  position: absolute;
  right: 23vw;
  bottom: 0;
  animation: bubble1 3s 1s infinite linear;
}
.bubble4 {
  width: 5vw;
  position: absolute;
  right: 21vw;
  bottom: 0;
  animation: bubble1 3s 2s infinite linear;
}
.bubble5 {
  width: 5vw;
  position: absolute;
  left: 7vw;
  bottom: 0;
  animation: bubble1 7s 2s infinite linear;
}
.bubble6 {
  width: 5vw;
  position: absolute;
  left: 5vw;
  bottom: 0;
  animation: bubble1 7s 3.5s infinite linear;
}
@keyframes bubble1 {
  0% {
    transform: translate3d(0, 0, 0) scale(0);
  }
  100% {
    transform: translate3d(0, -15vw, 0) scale(1);
  }
}

/* 各单词动画 */
/* 单词展示 */
#word-show {
  width: 54.4vw;
  height: 40vw;
  position: absolute;
  left: 50%;
  top: 10vw;
  transform: translateX(-50%);
  background: url('./images/cloud.png') center no-repeat;
  background-size: cover;
  overflow: hidden;
  display: none;
  animation: wordShow 0.7s forwards;
}
@keyframes wordShow {
  0% {
    transform: translateX(-50%) scale(0);
  }
  100% {
    transform: translateX(-50%) scale(1);
  }
}
#word-show div {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding-top: 7vw;
  display: none;
}
#word-show div img {
  display: block;
  margin: 0 auto 2vw;
}
/* a */
.show-a img{
}