vue写的活动页面-扭蛋机

扭蛋机，一听就很高大尚，公司让整，哎，烦心啊，vue-cli搭建的，效果就是点击开始，扭蛋机里扭蛋晃起来，然后摇完后，从下面口里出来要出的扭蛋。

扭蛋机

其实怎么说，扭蛋机分3部，额，动起来，动的过程，动结束效果
先说动起来，音乐是必不可少的

 <audio id="audio">
        <source src="http://fs.open.kugou.com/8e91da22e5a70d9dba2f495507cf6f0b/5c515b97/G014/M03/1F/17/Tg0DAFULMQeISv_4AAqjm_DkxeAAAAHqgMJ5JIACqOz100.m4a" type="audio/mp3">
      </audio>

var audio = document.getElementById("audio");
      if (audio.paused) {
        // 开始播放当前点击的音频
        this.isShowMusic = false;
        this.$refs.music.style['animation-play-state'] = 'running'
        audio.play();
      } else {
        this.isShowMusic = true;
        this.isKaiMusic = false;
        this.$refs.music.style['animation-play-state'] = 'paused'
        audio.pause();
      }

<div class="ball">
                    <img v-for="(item,index) in itemImg" :class="isA?'wieyi_'+(index+1):''" :src="'/static/img/'+item.img" alt="" />

                </div>
这是初始分发小球，
其实说白了，就是点击开始的时候，isA变成true，添加class，然后css3动画开始弹跳，这个轨迹需要自己去摸索设置
.wieyi_1 {
  animation: around1 1.5s linear infinite;
}

.wieyi_2 {
  animation: around2 1.5s linear infinite;
}

.wieyi_3 {
  animation: around3 1.5s linear infinite;
}

.wieyi_4 {
  animation: around4 1.5s linear infinite;
}

.wieyi_5 {
  animation: around5 1.5s linear infinite;
}

.wieyi_6 {
  animation: around6 1.5s linear infinite;
}

.wieyi_7 {
  animation: around7 1.5s linear infinite;
}

.wieyi_8 {
  animation: around8 1.5s linear infinite;
}

.wieyi_9 {
  animation: around9 1.5s linear infinite;
}

.wieyi_10 {
  animation: around10 1.5s linear infinite;
}
有了动画效果，其实就可以随心所欲的动起来了

结束的时候，添加动态效果，让小球从小口出从上往下掉下里就行了

全部代码上

<template lang="html">
<div class="bannerTop">
  <div class="controlmusic" ref="music" @click="isAudio()">
         <img src="~img/oNmusic.png" v-if="isShowMusic" />
      <audio id="audio">
        <source src="http://fs.open.kugou.com/8e91da22e5a70d9dba2f495507cf6f0b/5c515b97/G014/M03/1F/17/Tg0DAFULMQeISv_4AAqjm_DkxeAAAAHqgMJ5JIACqOz100.m4a" type="audio/mp3">
      </audio>
        </div>
        <div class="actderict">
            <img src="~img/derict.png" />
        </div>
        <div class="gametitle">
            <img src="~img/gametitle.png" alt="" />
        </div>

        <div class="game_qu">
            <!--<img src="img/game.png"/>-->
            <div class="eyes">
                <img src="~img/eyeleft.png" />
                <img src="~img/eyeright.png" />
            </div>
            <div class="eye_off">
                <img src="~img/eye_off_left.png" />
                <img src="~img/eye_off_right.png" />
            </div>
            <div class="mouch">
                <div class="ball">
                    <img v-for="(item,index) in itemImg" :class="isA?'wieyi_'+(index+1):''" :src="'/static/img/'+item.img" alt="" />

                </div>
                <img src="~img/mosha.png" />
            </div>
        </div>
        <div class="showballbg">
      <transition name="ballmove">
      <div class="zjd" v-if="isShowX">
                <img :src="'/static/img/'+isWitch" alt="" />
     </div>
     </transition>
    </div>

    <div class="popDiv" v-show="popupVisible">
       <mtPop @isPopupVisibleClick="isPopupVisibleClick" @isButtonClick="isButtonClick" :isPop=isPop></mtPop>
     </div>
     <transition name="fade">
      <div class="isVodel" v-show="popupVisible" @touchmove.prevent>

      </div>
    </transition>
    <div class="popup" v-show="toast_control">

        <div class="popbg"></div>

     <transition name="fadeName">
      <div class="popboxb" v-if="toastName" ref="popBackground">
          <img :class="{'imgLeft':imgShow}" src="~img/bg2.png" alt="" />
          <img :class="{'imgRight':imgShow}" src="~img/bg4.png" alt="" />
      </div>
    </transition>

    <div class="popbox" v-if="isShowPop">

      <div class="img" :class="{'img1':isImgTrue}"></div>
      <div class="words1">{{hasPrize.words1}}</div>
      <div class="words2">{{hasPrize.words2}}</div>
      <div class="words3" v-show="hasPrize.words3!=''">{{hasPrize.words3}}</div>
    </div>

    <div class="close" @click="buttonClick()" v-if="isShowPop"></div>


  </div>

        <div class="bottom">
            <img src="~img/bottom.png" alt="" />
        </div>
        <div class="joingame" @click="draw()">
            <img src="~img/join.png" />
        </div>
</div>
</template>

<script>
import mtPop from "./mtPop.vue";
import bgBackground from "img/bg5.png";
import bgBackgroundFont from "img/bg1.png";
import {
  initApi,
  loginApi,
  lotteryApi,
  awardApi,
  winning
} from "../api/api";
export default {
  data() {
    return {
      isA: false,
      itemImg: [],
      isB: true,
      isButton: false, //是否登录开关
      isShowX: false,
      popupVisible: false, //根据后端返回判断是否显示登录框
      isPop: false, //传给子组件参数
      toast_control: false, //抽奖结果和活动规则弹出框控制器
      objectAllData: {},
      isImgTrue: false, //谢谢参与按钮是否显示
      hasPrize: {}, //抽奖之后弹出框信息
      isShowMusic: true,
      isKaiguan: false,
      isKaiMusic: true, //点击触发音乐关闭
      toastName: false,
      imgShow: false,
      isShowPop: false,
    }
  },
  created() {
    for (var i = 1; i < 17; i++) {
      this.itemImg.push({
        "img": "ball" + i + ".png"
      })
    }
    console.log(this.itemImg);
  },
  mounted() {

    this.loginMenu();
    document.getElementById("audio").play();
    console.log(document.getElementById("audio").paused)
    if (!document.getElementById("audio").paused) {
      this.isShowMusic = false;
      this.$refs.music.style['animation-play-state'] = 'running'
    }

  },
  components: {
    mtPop
  },
  methods: {
    buttonClick() {
      this.toast_control = false;
      this.isShowPop = false;
      //document.getElementById("audio").pause();
      //this.$refs.music.style['animation-play-state'] = 'paused'
      //audio.currentTime = 0;
      //this.isShowMusic = true;
    },
    isAudio() {
      var audio = document.getElementById("audio");
      if (audio.paused) {
        // 开始播放当前点击的音频
        this.isShowMusic = false;
        this.$refs.music.style['animation-play-state'] = 'running'
        audio.play();
      } else {
        this.isShowMusic = true;
        this.isKaiMusic = false;
        this.$refs.music.style['animation-play-state'] = 'paused'
        audio.pause();
      }
    },
    //获得商户下所有活动信息
    initApiMenu() {
      initApi().then((res) => {
        if (res.httpCode == 200) {
          document.title = res.data.marketingCampaign.activityName;
          this.ObjectAll = res.data;
          this.prize_list = [];
          res.data.marketingCampaign.terms.forEach((item, index) => {
            if (item.termType == 10) {
              this.itemsList = item.termVal;
            }
          })
          res.data.marketingCampaign.pictures.forEach((item) => {

          })

        } else {
          this.$toast(res.retMsg);
        }
      })
    },
    //活动入口初始化
    loginMenu() {
      
      let paramsName = {};
      if (window.location.host.split(".")[0] != "192") {
        paramsName.actId = window.location.host.split(".")[0];
      } else {
        paramsName.actId = "vx1yxyzt";
      }

      let code = this.$route.query.code;
      if (typeof(code) != "undefined" && code != "") {
        paramsName.code = this.$route.query.code;
      }

      let queryObject = this.$route.fullPath;
      let queryString = "";

      if (queryObject.indexOf("?") > 0) {
        queryString = queryObject.split("?")[1];
      }
      paramsName.queryString = queryString;

      loginApi(paramsName).then((res) => {
        if (res.httpCode == 200) {
          //优先跳微信鉴权
          if (res.data.signUrl) {
            window.location.href = res.data.signUrl;
          } else {
            window.localStorage.setItem("activity_lefeng", res.data.sign);
            this.initApiMenu();
          }
          this.isPop = true;
          this.popupVisible = !res.data.loginStatus;
          this.isButton = !res.data.loginStatus;
        } else {
          this.$toast(res.retMsg);
        }
      })
    },
    //弹出框，子传父方法
    isButtonClick(val) {
      this.isButton = val;
    },
    //弹出框，子传父方法
    isPopupVisibleClick(val) {
      this.popupVisible = val;
    },
    //弹出奖项效果
    game_over(index) {
      var obj = {}
      this.toast_control = true;
        this.toastName = true;
      setTimeout(() => {
        this.$refs.popBackground.style.backgroundImage = "url(" + bgBackground + ")"
        this.imgShow = true;
      }, 1500)
      setTimeout(() => {
        this.toastName = false;
        this.imgShow = false;
        this.isShowPop = true;
        this.$refs.popBackground.style.backgroundImage = "url(" + bgBackgroundFont + ")"
        if (index == 3) {
          this.isImgTrue = false;
          obj = {
            type: 0,
            words1: '谢谢参与',
            words2: "不要气馁！",
            words3: '还有更多大奖等着你~'
          }
        } else if (index == 1) {
          this.isImgTrue = false;
          obj = {
            type: 1,
            words1: '恭喜您！',
            words2: "获得" + this.objectAllData.prizeName,
            words3: ''
          }
        } else {
          this.isImgTrue = true;
          obj = {
            type: 3,
            words1: '抱歉！',
            words2: '出现未知错误，请稍后再试',
            words3: ''
          }
        }

        this.hasPrize = obj;
      }, 2800)

    },
    rotating(index) {
      if (index == 1) {
        this.game_over(3);
      } else {
        awardApi().then((res) => {
          this.isShowX = false;
          this.isWitch = "";
          if (res.httpCode == 200) {
            this.game_over(1);
          } else {
            this.game_over(2);
          }
        })
      }

    },
    draw() {
      if (this.isButton) {
        this.popupVisible = true;
        return;
      }
      this.$indicator.open({
        text: '加载中...',
        spinnerType: 'fading-circle'
      });

      if (this.isKaiguan) {
        return;
      }
      lotteryApi().then((res) => {
        this.$indicator.close()
        this.isKaiguan = true;
        if (res.httpCode == 200) {
          if (this.isKaiMusic) {
            var audio = document.getElementById("audio")
            audio.play();
            this.isShowMusic = false;
            this.$refs.music.style['animation-play-state'] = 'running'
          }
          this.isShowX = false;
          this.isWitch = "";
          this.isA = true;
          setTimeout(() => {
            this.isA = false;
            let num = Math.floor(7 * Math.random() + 1);
            this.isWitch = "ball" + num + ".png";
            this.isShowX = true;
            this.objectAllData = res.data
          }, 3000);
          setTimeout(() => {
            if (this.objectAllData.prizeName == "谢谢参与") {
              this.rotating(1);
            } else {
              this.rotating(2);
            }
            this.isKaiguan = false;
          }, 4000)

        } else {
          if (res.retCode == "10030001" || res.retCode == "10131024") {
            localStorage.removeItem("activity_lefeng");
            this.loginMenu();
          } else {
            this.$toast(res.retMsg);
          }
        }
      });

    }
  }
}
</script>

<style lang="css" scoped>


    .fadeName-enter-active,
    .fadeName-leave-active {

      transition: all 1s cubic-bezier(1.0, 0.5, 0.8, 1.0);

    }

    .fadeName-enter,
    .fadeName-leave-to {
      transform-origin: center center;
      transform: scale(0.2);

    }

  .ballmove-enter-active,.ballmove-leave-active  {
      transition: all 1s ease;
    }
    .ballmove-enter{
        top: -0.9rem;
    }
    .fadeOpcaty-enter-active,
.fadeOpcaty-leave-active {
  transition: opacity 1s;
}

.fadeOpcaty-enter,
.fadeOpcaty-leave-to
  {
  opacity: 0;
}
    .fade-enter-active,
.fade-leave-active {
  transition: opacity .2s;
}

.fade-enter,
.fade-leave-to
  {
  opacity: 0;
}
.popDiv {
  position: fixed;
  background: #fff;
  top: 30%;
  left: 50%;
  z-index: 250;
  margin-left: -2.8rem;
  opacity: 1;
  width: 5.6rem;
}
.isVodel {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  background: #000;
  z-index: 100;
}

</style>

引入的css文件

body {
  /*background: linear-gradient(#b72258,#7141bb);*/
  background: url(../img/bg.png) center 0 no-repeat, #7a3dc0;
  height: 100%;
  background-size: 100% 11.36rem;
}

#audio {
  display: none;
}

.controlmusic {
  position: absolute;
  left: 0.23rem;
  top: 0.1rem;
  width: 0.64rem;
  height: 0.64rem;
  background: url(../img/music.png);
  background-size: 100% 100%;
  animation: music 2s linear infinite paused;
  transform-origin: center center;
  text-align: center;
  line-height: 0.64rem;
  z-index: 10;
}

.controlmusic img {
  width: 0.43rem;
  height: 0.43rem;
  vertical-align: middle;
}

.actderict {
  position: absolute;
  right: 0.1rem;
  top: 0.1rem;
}

.actderict img {
  width: 1.29rem;
  height: 0.8rem;
  animation: direct 2s linear infinite alternate;
}

@keyframes music {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes direct {
  0% {
    transform: scale(0.7);
  }

  100% {
    transform: scale(1.1);
  }
}

.gametitle {
  position: absolute;
  left: 50%;
  top: 0.18rem;
  margin-left: -2.6rem;
  z-index: 4;
}

.gametitle img {
  width: 5.2rem;
  height: 1.8rem;
}

.game_qu {
  padding-top: 1.9rem;
  left: 50%;
  margin-left: -2.54rem;
  top: 1.75rem;
  position: absolute;
  z-index: 30;
  width: 5.08rem;
  height: 6.35rem;
  background: url(../img/game.png) 0 0 no-repeat;
  background-size: 100% 100%;
}

.bottom {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 7rem;
  z-index: 2;
}

.bottom img {
  width: 5.46rem;
  height: 2.18rem;
}

.eyes {
  position: absolute;
  top: 1.1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
  width: 2.56rem;
}

.eyes img {
  width: 0.32rem;
  height: 0.46rem;
}

.eye_off {
  position: absolute;
  top: 1.1rem;
  left: 50%;
  margin-left: -1.28rem;
  display: flex;
  justify-content: space-between;
  width: 2.56rem;
  z-index: 4;
  overflow: hidden;
  animation: eyeAct 2s linear 1000ms infinite;
}

.eye_off img {
  width: 0.34rem;
  height: 0.51rem;
}

@keyframes eyeAct {
  0% {
    height: 0;
  }

  4% {
    height: 0.51rem;
  }

  6% {
    height: 0;
  }

  100% {
    height: 0;
  }
}

.zjd {
  width: 0.9rem;
  height: 0.9rem;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 100;
  top: 0rem;
}

.zjd img {
  width: 0.76rem;
  height: 0.76rem;
  position: absolute;
  left: .06rem;
}

.mouch {
  text-align: center;
  width: 3.56rem;
  margin-left: auto;
  margin-right: auto;
  background: url(../img/mouth.png) 0 0 no-repeat;
  background-size: 100% 100%;
  position: relative;
}

.mouch>img {
  width: 3.58rem;
  height: 2.25rem;
  position: absolute;
  left: 0;
  top: 0;
}

.showballbg {
  position: absolute;
  top: 6.2rem;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 0.45rem;
  background: #082b45;
  width: 0.9rem;
  height: 0.9rem;
  z-index: 2;
}

.ball {
  width: 3.56rem;
  height: 2.05rem;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  top: 0.05rem;
  transform: rotate(0deg);
  -webkit-border-radius: 1.56rem;
  -moz-border-radius: 1.56rem;
  -ms-border-radius: 1.56rem;
  -o-border-radius: 1.56rem;
  border-radius: 1.56rem;
}

.ball img {
  width: 0.76rem;
  height: 0.76rem;
  position: absolute;
}

.ball img:nth-child(1) {
  left: -0.1rem;
  bottom: 0.3rem;
}

.ball img:nth-child(2) {
  left: 0.56rem;
  bottom: 0rem;
}

.ball img:nth-child(3) {
  left: 1.1rem;
  bottom: 0.43rem;
}

.ball img:nth-child(4) {
  left: 1.8rem;
  bottom: 0rem;
}

.ball img:nth-child(5) {
  position: absolute;
  left: 2.4rem;
  bottom: 0rem;
}

.ball img:nth-child(6) {
  left: 2.9rem;
  bottom: 0.39rem;
}

.ball img:nth-child(7) {
  left: 0.05rem;
  bottom: 0.1rem;
}

.ball img:nth-child(8) {
  left: 1.2rem;
  bottom: -0.05rem;
}

.ball img:nth-child(9) {
  left: 1.6rem;
  bottom: -0.02rem;
}

.ball img:nth-child(10) {
  left: 2.2rem;
  bottom: 0
}

.ball img:nth-child(11) {
  left: 2.6rem;
  bottom: 0rem;
}

.ball img:nth-child(12) {
  left: 2rem;
  bottom: -0.02rem;
}

.ball img:nth-child(13) {
  left: 0.7rem;
  bottom: -0.1rem;
}

.ball img:nth-child(14) {
  left: 1.6rem;
  bottom: 0.7rem;
}

.ball img:nth-child(15) {
  left: 2.1rem;
  bottom: 0.7rem;
}

.ball img:nth-child(16) {
  left: 0.5rem;
  bottom: 0.6rem;
}


.joingame {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 8.5rem;
  z-index: 2;
}

.joingame img {
  width: 2.45rem;
  height: 0.88rem;
}

.popup {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 30;
  top: 0;
  left: 0;
}

.popbg {
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.7;
}

.popbox {
  width: 5.54rem;
  height: 4.98rem;
  position: absolute;
  top: 27%;
  left: 0;
  right: 0;
  margin: auto;
  background: url(../img/giftboxbg.png) top center no-repeat;
  background-size: 100%;
  text-align: center;
}

.popboxb {
  width: 5.54rem;
  height: 4.98rem;
  position: absolute;
  top: 27%;
  left: 0;
  right: 0;
  margin: auto;
  background: url(../img/bg1.png) top center no-repeat;
  background-size: 100%;
}

.popboxb img {
  width: 2.54rem;
}

.popboxb .imgLeft {
  top: 2.3rem !important;
  transition: all 1s;
}

.popboxb .imgRight {
  top: 0.5rem !important;
  transition: all 1s;
}

.popboxb img:nth-child(1) {
  position: absolute;
  left: 1.50rem;
  top: 1.80rem;
  transform: rotate(45deg);
}

.popboxb img:nth-child(2) {
  position: absolute;
  left: 1.50rem;
  top: 1.17rem;
  transform: rotate(45deg);
}

.popbox .img {
  width: 3.06rem;
  height: 1.4rem;
  margin: auto;
  margin-top: 1.07rem;
  margin-left: 1.1rem;
  background: url(../img/gift.png) top center no-repeat;
  background-size: 100%;
}

.popbox .img1 {
  background: url(../img/regret.png) top center no-repeat;
  background-size: 100%;
}

.popbox .words1 {
  font-size: 0.4rem;
  color: #ff7d12;
  margin-top: 0.2rem;
}

.popbox .words2 {
  font-size: 0.28rem;
  color: #ff8422;
  padding-left: .7rem;
  padding-right: .7rem;
}

.popbox .words3 {
  font-size: 0.24rem;
  color: #999999;
  margin-top: 0.07rem;
}

.popup .close {
  width: 0.5rem;
  height: 0.5rem;
  background: url(../img/close.png) top center no-repeat;
  background-size: 100%;
  position: absolute;
  top: 75%;
  left: 0;
  right: 0;
  margin: auto;
}

.wieyi_1 {
  animation: around1 1.5s linear infinite;
}

.wieyi_2 {
  animation: around2 1.5s linear infinite;
}

.wieyi_3 {
  animation: around3 1.5s linear infinite;
}

.wieyi_4 {
  animation: around4 1.5s linear infinite;
}

.wieyi_5 {
  animation: around5 1.5s linear infinite;
}

.wieyi_6 {
  animation: around6 1.5s linear infinite;
}

.wieyi_7 {
  animation: around7 1.5s linear infinite;
}

.wieyi_8 {
  animation: around8 1.5s linear infinite;
}

.wieyi_9 {
  animation: around9 1.5s linear infinite;
}

.wieyi_10 {
  animation: around10 1.5s linear infinite;
}

.wieyi_11 {
  animation: around11 1.5s linear infinite;
}

.wieyi_12 {
  animation: around12 1.5s linear infinite;
}

.wieyi_13 {
  animation: around13 1.5s linear infinite;
}

.wieyi_14 {
  animation: around14 1.5s linear infinite;
}

.wieyi_15 {
  animation: around15 1.5s linear infinite;
}

.wieyi_16 {
  animation: around16 1.5s linear infinite;
}



@keyframes around1 {
  0% {
    transform: translate(0px, 0px)
  }

  20% {
    transform: translate(1rem, 1rem)
  }

  40% {
    transform: translate(2.2rem, -1.3rem)
  }

  60% {
    transform: translate(1.8rem, 0rem)
  }

  80% {
    transform: translate(-0.5rem, -1rem)
  }

  100% {
    transform: translate(2rem, 2.4rem)
  }
}

@keyframes around2 {
  0% {
    transform: translate(0px, 0px)
  }

  10% {
    transform: translate(300px, -120px)
  }

  30% {
    transform: translate(250px, 130px)
  }

  50% {
    transform: translate(-50px, -120px)
  }

  80% {
    transform: translate(0px, 140px)
  }

  100% {
    transform: translate(300px, -180px)
  }
}

@keyframes around3 {
  0% {
    transform: translate(0px, 0px)
  }

  25% {
    transform: translate(70px, -290px)
  }

  50% {
    transform: translate(320px, 0px)
  }

  80% {
    transform: translate(-20px, -290px)
  }

  100% {
    transform: translate(290px, 0px)
  }
}

@keyframes around4 {
  0% {
    transform: translate(0px, 0px)
  }

  12% {
    transform: translate(50px, 250px)
  }

  30% {
    transform: translate(-150px, -30px)
  }

  60% {
    transform: translate(-140px, 260px)
  }

  80% {
    transform: translate(-10px, -30px)
  }

  100% {
    transform: translate(-20px, 260px)
  }
}

@keyframes around5 {
  0% {
    transform: translate(0px, 0px)
  }

  22% {
    transform: translate(-50px, -170px)
  }

  46% {
    transform: translate(150px, 145px)
  }

  80% {
    transform: translate(200px, -115px)
  }

  100% {
    transform: translate(-100px, 145px)
  }
}

@keyframes around6 {
  0% {
    transform: translate(0px, 0px)
  }

  15% {
    transform: translate(260px, 40px)
  }

  30% {
    transform: translate(-80px, -260px)
  }

  45% {
    transform: translate(-40px, 40px)
  }

  60% {
    transform: translate(100px, -290px)
  }

  75% {
    transform: translate(-80px, -280px)
  }

  100% {
    transform: translate(10px, 40px)
  }
}

@keyframes around7 {
  0% {
    transform: translate(0px, 0px)
  }

  15% {
    transform: translate(-100px, 40px)
  }

  30% {
    transform: translate(80px, 60px)
  }

  45% {
    transform: translate(-40px, 40px)
  }

  60% {
    transform: translate(100px, -290px)
  }

  75% {
    transform: translate(-80px, -280px)
  }

  100% {
    transform: translate(50px, 80px)
  }
}

@keyframes around8 {
  0% {
    transform: translate(0px, 0px)
  }

  15% {
    transform: translate(120px, 20px)
  }

  30% {
    transform: translate(-20px, -160px)
  }

  45% {
    transform: translate(-10px, 10px)
  }

  60% {
    transform: translate(100px, -290px)
  }

  75% {
    transform: translate(-80px, -280px)
  }

  100% {
    transform: translate(20px, 50px)
  }
}

@keyframes around9 {
  0% {
    transform: translate(0px, 0px)
  }

  15% {
    transform: translate(150px, 120px)
  }

  30% {
    transform: translate(-10px, -10px)
  }

  45% {
    transform: translate(-120px, 110px)
  }

  60% {
    transform: translate(110px, -280px)
  }

  75% {
    transform: translate(-10px, -180px)
  }

  100% {
    transform: translate(30px, 40px)
  }
}

@keyframes around10 {
  0% {
    transform: translate(0px, 0px)
  }

  15% {
    transform: translate(110px, 10px)
  }

  30% {
    transform: translate(-120px, -10px)
  }

  45% {
    transform: translate(-110px, 110px)
  }

  60% {
    transform: translate(10px, -20px)
  }

  75% {
    transform: translate(-10px, -80px)
  }

  100% {
    transform: translate(2px, 5px)
  }
}

@keyframes around11 {
  0% {
    transform: translate(0px, 0px)
  }

  15% {
    transform: translate(110px, 10px)
  }

  30% {
    transform: translate(-20px, 10px)
  }

  45% {
    transform: translate(-101px, 102px)
  }

  60% {
    transform: translate(130px, 90px)
  }

  75% {
    transform: translate(-180px, -280px)
  }

  100% {
    transform: translate(0px, 10px)
  }
}

@keyframes around12 {
  0% {
    transform: translate(0px, 0px)
  }

  15% {
    transform: translate(10px, 120px)
  }

  30% {
    transform: translate(-10px, -60px)
  }

  45% {
    transform: translate(-101px, 10px)
  }

  60% {
    transform: translate(10px, -90px)
  }

  75% {
    transform: translate(80px, -80px)
  }

  100% {
    transform: translate(10px, 50px)
  }
}

@keyframes around13 {
  0% {
    transform: translate(0px, 0px)
  }

  15% {
    transform: translate(110px, 20px)
  }

  30% {
    transform: translate(-110px, -160px)
  }

  45% {
    transform: translate(-20px, 10px)
  }

  60% {
    transform: translate(10px, -290px)
  }

  75% {
    transform: translate(0px, -280px)
  }

  100% {
    transform: translate(0px, 50px)
  }
}

@keyframes around14 {
  0% {
    transform: translate(0px, 0px)
  }

  15% {
    transform: translate(20px, 20px)
  }

  30% {
    transform: translate(0px, -160px)
  }

  45% {
    transform: translate(0px, 100px)
  }

  60% {
    transform: translate(100px, -90px)
  }

  75% {
    transform: translate(-80px, -20px)
  }

  100% {
    transform: translate(20px, 0px)
  }
}

@keyframes around15 {
  0% {
    transform: translate(0px, 0px)
  }

  15% {
    transform: translate(-90px, 40px)
  }

  30% {
    transform: translate(70px, 50px)
  }

  45% {
    transform: translate(-30px, 40px)
  }

  60% {
    transform: translate(10px, -90px)
  }

  75% {
    transform: translate(-80px, -280px)
  }

  100% {
    transform: translate(0px, 80px)
  }
}
@keyframes around16 {
  0% {
    transform: translate(0px, 0px)
  }

  15% {
    transform: translate(10px, 10px)
  }

  30% {
    transform: translate(10px, 60px)
  }

  45% {
    transform: translate(0px, 100px)
  }

  60% {
    transform: translate(100px, -90px)
  }

  75% {
    transform: translate(80px, -20px)
  }

  100% {
    transform: translate(20px, 10px)
  }
}