FishGame

5/18/2019 - 5:32 AM
.box:nth-child(1),
.box:nth-child(60),
.box:nth-child(150),
.box:nth-child(227) {
  background: url(../img_k/Nakama3.png);
  font-size: 0;
  background-size: 100px;
  background-repeat: no-repeat;
  width: 120px;
  height: 120px;
  background-position: center;
}

.box:nth-child(8),
.box:nth-child(70),
.box:nth-child(161)
{
  background: url(../img_k/Nakama4.png);
  font-size: 0;
  background-size: 100px;
  background-repeat: no-repeat;
  width: 120px;
  height: 120px;
  background-position: center;
}


.box:nth-child(14),
.box:nth-child(79),
.box:nth-child(168)
 {
  background: url(../img_k/NakamaTsuppari.png);
  font-size: 0;
  background-size: 100px;
  background-repeat: no-repeat;
  width: 120px;
  height: 120px;
  background-position: center;
}

.box:nth-child(19),
.box:nth-child(84),
.box:nth-child(174),
.box:nth-child(230)
 {
  background: url(../img_k/NakamaUkiwa.png);
  font-size: 0;
  background-size: 100px;
  background-repeat: no-repeat;
  width: 120px;
  height: 120px;
  background-position: center;
}

.box:nth-child(22),
.box:nth-child(102),
.box:nth-child(181),
.box:nth-child(234)
 {
  background: url(../img_k/NakamaUkiwa2-1.png);
  font-size: 0;
  background-size: 100px;
  background-repeat: no-repeat;
  width: 120px;
  height: 120px;
  background-position: center;
}

.box:nth-child(28),
.box:nth-child(113),
.box:nth-child(205)
 {
  background: url(../img_k/Fugu.png);
  font-size: 0;
  background-size: 100px;
  background-repeat: no-repeat;
  width: 120px;
  height: 120px;
  background-position: center;
}

.box:nth-child(56),
.box:nth-child(137),
.box:nth-child(221),
.box:nth-child(239)
 {
  background: url(../img_y/tako.png);
  font-size: 0;
  background-size: 100px;
  background-repeat: no-repeat;
  width: 120px;
  height: 120px;
  background-position: center;
}

.box:nth-child(36),
.box:nth-child(125),
.box:nth-child(216)
 {
  background: url(../img_y/naporeonfish.png);
  font-size: 0;
  background-size: 100px;
  background-repeat: no-repeat;
  width: 120px;
  height: 120px;
  background-position: center;
}

.box:nth-child(32),
.box:nth-child(116),
.box:nth-child(207)
 {
  background: url(../img_y/manboo.png);
  font-size: 0;
  background-size: 100px;
  background-repeat: no-repeat;
  width: 120px;
  height: 120px;
  background-position: center;
}



.box.Nakama3 {
  /* background: url(../img_k/.png); */
  background-size: 100px;
  background-repeat: no-repeat;
  width: 120px;
  height: 120px;
  background-position: center;
  /* アニメーション keyframesの稼働命令 */
  animation-name: up2;
  animation-duration: 0.5s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
  animation-direction: alternate-reverse;
}

.box.Nakama4 {
  /* background: url(../img_k/.png); */
  background-size: 100px;
  background-repeat: no-repeat;
  width: 120px;
  height: 120px;
  background-position: center;
  /* アニメーション keyframesの稼働命令 */
  animation-name: slide1;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate-reverse;
}

.box.NakamaTsuppari {
  /* background: url(../img_k/.png); */
  background-size: 100px;
  background-repeat: no-repeat;
  width: 120px;
  height: 120px;
  background-position: center;
  /* アニメーション keyframesの稼働命令 */
  animation-name: bigger1;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate-reverse;
}

.box.NakamaUkiwa {
  /* background: url(../img_k/.png); */
  background-size: 100px;
  background-repeat: no-repeat;
  width: 120px;
  height: 120px;
  background-position: center;
  /* アニメーション keyframesの稼働命令 */
  animation-name: slide2;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate-reverse;
}

.box.NakamaUkiwa2-1 {
  /* background: url(../img_k/.png); */
  background-size: 100px;
  background-repeat: no-repeat;
  width: 120px;
  height: 120px;
  background-position: center;
  /* アニメーション keyframesの稼働命令 */
  animation-name: shake1;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate-reverse;
}

.box.Fugu {
  /* background: url(../img_k/.png); */
  background-size: 100px;
  background-repeat: no-repeat;
  width: 120px;
  height: 120px;
  background-position: center;
  /* アニメーション keyframesの稼働命令 */
  animation-name: gone1;
  animation-duration: 3s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
  animation-direction: alternate-reverse;
}

.box.tako-y {
  /* background: url(../img_k/.png); */
  background-size: 100px;
  background-repeat: no-repeat;
  width: 120px;
  height: 120px;
  background-position: center;
  /* アニメーション keyframesの稼働命令 */
  animation-name: bounce1;
  animation-duration: 2s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
  animation-direction: alternate-reverse;
}

.box.napo {
  /* background: url(../img_k/.png); */
  background-size: 100px;
  background-repeat: no-repeat;
  width: 120px;
  height: 120px;
  background-position: center;
  /* アニメーション keyframesの稼働命令 */
  animation-name: slide3;
  animation-duration: 3s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
  animation-direction: alternate-reverse;
}

.box.manboo {
  /* background: url(../img_k/.png); */
  background-size: 100px;
  background-repeat: no-repeat;
  width: 120px;
  height: 120px;
  background-position: center;
  /* アニメーション keyframesの稼働命令 */
  animation-name: swing1;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate-reverse;
}

/* ＊＊＊＊＊以下キーフレーム ＊＊＊＊＊＊*/

@keyframes slide1 {
    0% {
        transform: translateX(30px);
      }
      50% {
        transform: rotate(60deg);
        transition-delay: (0.6s);
      }
      100% {
        transform: translateX(-60px);
        transform: rotate(-20deg);
      }
}

@keyframes bigger1 {
    0% {
        transform: scale(0.5);
      }
      50% {
        transform: scale(1);
      }
      100% {
          transform: scale(2);
      }
}

@keyframes slide2 {
    0% {
        transform: translateX(100px);
    }
    50% {
        transform: translateY(-20px);
    }
    100% {
        transform: translateX(-100px), translateY(40px);
    }
}

@keyframes shake1 {
    0% {
        transform: translate(0px, 0px) rotate(0deg)
    }
    25% {
        transform: translate(10px, 10px) rotate(10deg)
    }
    50% {
        transform: translate(0px, 20px) rotate(0deg)
    }
    75% {
        transform: translate(20px, 0px) rotate(-10deg)
    }
    100% {
        transform: translate(0px, 0px) rotate(0deg)
    }
}

@keyframes gone1 {
    from{
        opacity:1;
        }
    to{
      opacity: 0;
        }
    }

    @keyframes bounce1 {
        0%{
            transform: rotateX(30deg) translate(0px, 0px);
        }
        10%{
            transform: rotateX(-30deg) translate(30px, -60px);
        }
        25%{
            transform: rotateX(30deg) translate(30px, 30px);
        }
        50%{
            transform: rotateX(-30deg) translate(-30px, 120px);
        }
        75%{
            transform: rotateX(30deg) translate(30px, 150px);
        }
    }

    @keyframes slide3 {
        10%{
            transform: translateX(-60px) scale(2);
        }
        50%{
            transform: translateX(60px) scale(1);
        }
        100%{
            transform: translateX(-60px) scale(2);
        }
    }


@keyframes swing1 {
    0%{
        transform: rotateX(50deg) translate(0px, 0px);
    }
    10%{
        transform: rotateX(-100deg) translate(30px, -60px);
    }
    25%{
        transform: rotateX(50deg) translate(30px, 30px);
    }
    50%{
        transform:  translate(-30px, 120px);
    }
    75%{
        transform: rotateX(100deg) translate(30px, 150px);
    }
}
Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster

FishGame
