Vent-App/pages/home/detail/fanmainAnimate/fanmainAnimate.vue

<template>
  <!-- 新的主通机动画 -->
  <view style="width: 100%; height: 100%">
    <div class="pageback">
      <!-- 动画展示 -->
      <div style="z-index: 33; height: 100%">
        <div class="ventilate" id="topPic">
          <!-- 进风箭头 -->
          <div
            :class="[
              nowfengji == '1'
                ? door1 == 1
                  ? topdoor1 == 1
                    ? reverseVal + 'arrowpic1-10'
                    : reverseVal + 'arrowpic1'
                  : topdoor1 == 1
                  ? reverseVal + 'arrowpic1-3'
                  : ''
                : nowfengji == '2'
                ? door2 == 1
                  ? topdoor2 == 1
                    ? reverseVal + 'arrowpic1-11'
                    : reverseVal + 'arrowpic1-2'
                  : topdoor2 == 1
                  ? reverseVal + 'arrowpic1-4'
                  : ''
                : '',
            ]"
            id="arrowpic1"
          ></div>
          <div
            :class="[
              nowfengji == '1'
                ? door1 == 1
                  ? topdoor1 == 1
                    ? reverseVal + 'arrowpic2-10'
                    : reverseVal + 'arrowpic2'
                  : topdoor1 == 1
                  ? reverseVal + 'arrowpic2-3'
                  : ''
                : nowfengji == '2'
                ? door2 == 1
                  ? topdoor2 == 1
                    ? reverseVal + 'arrowpic2-11'
                    : reverseVal + 'arrowpic2-2'
                  : topdoor2 == 1
                  ? reverseVal + 'arrowpic2-4'
                  : ''
                : '',
            ]"
            id="arrowpic2"
          ></div>
          <div
            :class="[
              nowfengji == '1'
                ? door1 == 1
                  ? topdoor1 == 1
                    ? reverseVal + 'arrowpic3-10'
                    : reverseVal + 'arrowpic3'
                  : topdoor1 == 1
                  ? reverseVal + 'arrowpic3-3'
                  : ''
                : nowfengji == '2'
                ? door2 == 1
                  ? topdoor2 == 1
                    ? reverseVal + 'arrowpic3-11'
                    : reverseVal + 'arrowpic3-2'
                  : topdoor2 == 1
                  ? reverseVal + 'arrowpic3-4'
                  : ''
                : '',
            ]"
            id="arrowpic3"
          ></div>
          <div
            :class="[
              nowfengji == '1'
                ? door1 == 1
                  ? topdoor1 == 1
                    ? reverseVal + 'arrowpic4-10'
                    : reverseVal + 'arrowpic4'
                  : topdoor1 == 1
                  ? reverseVal + 'arrowpic4-3'
                  : ''
                : nowfengji == '2'
                ? door2 == 1
                  ? topdoor2 == 1
                    ? reverseVal + 'arrowpic4-11'
                    : reverseVal + 'arrowpic4-2'
                  : topdoor2 == 1
                  ? reverseVal + 'arrowpic4-4'
                  : ''
                : '',
            ]"
            id="arrowpic4"
          ></div>
          <div
            :class="[
              nowfengji == '1'
                ? door1 == 1
                  ? topdoor1 == 1
                    ? reverseVal + 'arrowpic5-10'
                    : reverseVal + 'arrowpic5'
                  : topdoor1 == 1
                  ? reverseVal + 'arrowpic5-3'
                  : ''
                : nowfengji == '2'
                ? door2 == 1
                  ? topdoor2 == 1
                    ? reverseVal + 'arrowpic5-11'
                    : reverseVal + 'arrowpic5-2'
                  : topdoor2 == 1
                  ? reverseVal + 'arrowpic5-4'
                  : ''
                : '',
            ]"
            id="arrowpic5"
          ></div>
          <div
            :class="[
              nowfengji == '1'
                ? door1 == 1
                  ? topdoor1 == 1
                    ? reverseVal + 'arrowpic6-10'
                    : reverseVal + 'arrowpic6'
                  : topdoor1 == 1
                  ? reverseVal + 'arrowpic6-3'
                  : ''
                : nowfengji == '2'
                ? door2 == 1
                  ? topdoor2 == 1
                    ? reverseVal + 'arrowpic6-11'
                    : reverseVal + 'arrowpic6-2'
                  : topdoor2 == 1
                  ? reverseVal + 'arrowpic6-4'
                  : ''
                : '',
            ]"
            id="arrowpic6"
          ></div>
          <div
            :class="[
              nowfengji == '1'
                ? door1 == 1
                  ? topdoor1 == 1
                    ? reverseVal + 'arrowpic7-10'
                    : reverseVal + 'arrowpic7'
                  : topdoor1 == 1
                  ? reverseVal + 'arrowpic7-3'
                  : ''
                : nowfengji == '2'
                ? door2 == 1
                  ? topdoor2 == 1
                    ? reverseVal + 'arrowpic7-11'
                    : reverseVal + 'arrowpic7-2'
                  : topdoor2 == 1
                  ? reverseVal + 'arrowpic7-4'
                  : ''
                : '',
            ]"
            id="arrowpic7"
          ></div>
          <div
            :class="[
              nowfengji == '1'
                ? door1 == 1
                  ? topdoor1 == 1
                    ? reverseVal + 'arrowpic8-10'
                    : reverseVal + 'arrowpic8'
                  : topdoor1 == 1
                  ? reverseVal + 'arrowpic8-3'
                  : ''
                : nowfengji == '2'
                ? door2 == 1
                  ? topdoor2 == 1
                    ? reverseVal + 'arrowpic8-11'
                    : reverseVal + 'arrowpic8-2'
                  : topdoor2 == 1
                  ? reverseVal + 'arrowpic8-4'
                  : ''
                : '',
            ]"
            id="arrowpic8"
          ></div>
          <div
            :class="[
              nowfengji == '1'
                ? door1 == 1
                  ? topdoor1 == 1
                    ? reverseVal + 'arrowpic9-10'
                    : reverseVal + 'arrowpic9'
                  : topdoor1 == 1
                  ? reverseVal + 'arrowpic9-3'
                  : ''
                : nowfengji == '2'
                ? door2 == 1
                  ? topdoor2 == 1
                    ? reverseVal + 'arrowpic9-11'
                    : reverseVal + 'arrowpic9-2'
                  : topdoor2 == 1
                  ? reverseVal + 'arrowpic9-4'
                  : ''
                : '',
            ]"
            id="arrowpic9"
          ></div>
          <div
            :class="[
              nowfengji == '1'
                ? door1 == 1
                  ? topdoor1 == 1
                    ? reverseVal + 'arrowpic10-10'
                    : reverseVal + 'arrowpic10'
                  : topdoor1 == 1
                  ? reverseVal + 'arrowpic10-3'
                  : ''
                : nowfengji == '2'
                ? door2 == 1
                  ? topdoor2 == 1
                    ? reverseVal + 'arrowpic10-11'
                    : reverseVal + 'arrowpic10-2'
                  : topdoor2 == 1
                  ? reverseVal + 'arrowpic10-4'
                  : ''
                : '',
            ]"
            id="arrowpic10"
          ></div>

          <!-- 风扇动画展示 -->
          <!-- 巷道门阀 -->

          <div
            id="topdoor1"
            class="doordivb"
            style="width: 1%; height: 40%; top: 3%; left: 71%"
          >
            <div id="topdoor" :class="[door1 == 1 ? 'door1' : 'door2']"></div>
          </div>
          <div
            id="bottomdoor1"
            class="doordivb"
            style="width: 1%; height: 46%; top: 54.3%; left: 72%"
          >
            <div
              id="bottomdoor"
              :class="[door2 == 1 ? 'door1' : 'door2']"
            ></div>
          </div>

          <!-- 天窗 -->
          <div
            id="topwindow1"
            class="topwindow"
            style="width: 3%; height: 19%; top: 2%; left: 66.9%; z-index: 10"
          >
            <div
              id="topwindow"
              :class="[
                nowfengji == '1' && topdoor1 == 1 ? 'topwindow1' : 'topwindow2',
              ]"
            ></div>
          </div>
          <div
            id="topwindow2"
            class="topwindow"
            style="width: 3%; height: 19%; top: 53%; left: 67%; z-index: 10"
          >
            <div
              id="topwindow"
              :class="[
                nowfengji == '2' && topdoor2 ? 'topwindow1' : 'topwindow2',
              ]"
            ></div>
          </div>
          <!-- <div class="box-left" style="width:5.5%;height:14%;top: 15%;left: 20%;"></div> -->
          <div class="box" style="top: 12.2%; left: 30.4%">
            <div id="box2" :class="reverseVal ? 'fz' : 'zz'">
              <span></span>
              <span></span>
              <span></span>
              <span></span>
            </div>
            <!-- <div class="box-right" style="width:6%;height:14%;top: 15%;left:32%;"> -->
            <!-- 风机旁边阀门 -->
          </div>
          <div class="box-s" style="top: 12.2%; left: 34.5%">
            <div id="box2-s" :class="reverseVal ? 'fz1' : 'zz1'">
              <span></span>
              <span></span>
              <span></span>
              <span></span>
            </div>
          </div>
          <!-- <div class="box-left" style="width:5.5%;height:14%;top: 80%;left: 20%;"></div> -->
          <div class="box" style="bottom: 11.7%; left: 27.8%">
            <div id="box1" :class="reverseVal ? 'fz' : 'zz'">
              <span></span>
              <span></span>
              <span></span>
              <span></span>
            </div>
          </div>
          <!-- 蝶阀 -->
          <div
            id="topfundoor1"
            class="fundoor"
            style="width: 3%; height: 36%; left: 45.9%; z-index: 10; top: 6.6%"
          >
            <div
              id="topfundoor"
              :class="[
                nowfengji == '1' && fundoor1 == 1 ? 'fundoor1' : 'fundoor2',
              ]"
            ></div>
          </div>
          <div
            id="bottomfundoor1"
            class="fundoor"
            style="width: 3%; height: 36%; left: 44%; z-index: 10; top: 57%"
          >
            <div
              id="bottomfundoor"
              :class="[
                nowfengji == '2' && fundoor2 == 1 ? 'fundoor1' : 'fundoor2',
              ]"
            ></div>
          </div>
          <!-- 风机 -->
          <!-- <div class="box-right" style="width:6%;height:14%;top: 80%;left:32.5%;"> -->
          <div class="box-s" style="bottom: 11.7%; left: 32.4%">
            <div id="box1-s" :class="reverseVal ? 'fz1' : 'zz1'">
              <span></span>
              <span></span>
              <span></span>
              <span></span>
            </div>
          </div>
        </div>
      </div>
      <!-- 文字标识 -->
      <div
        style="
          position: absolute;
          color: #fff;
          top: 20%;
          left: 10%;
          color: #ff0;
        "
      >
        <span>1号电机</span>
      </div>
      <div
        style="
          position: absolute;
          color: #fff;
          top: 20%;
          left: 39%;
          color: #ff0;
        "
      >
        <span>2号电机</span>
      </div>
      <div
        style="
          position: absolute;
          color: #fff;
          color: #ff0;
          bottom: 57%;
          left: 10%;
        "
      >
        <span>1号电机</span>
      </div>
      <div
        style="
          position: absolute;
          color: #fff;
          bottom: 57%;
          left: 38%;
          color: #ff0;
        "
      >
        <span>2号电机</span>
      </div>
      <div style="position: absolute; color: #fff; top: 45%; left: 28.4%">
        <span v-if="topindex == 2">1#风机</span>
        <span v-if="topindex == 1">2#风机</span>
      </div>
      <div style="position: absolute; color: #fff; top: 19%; left: 31.4%">
        <span v-if="topindex == 2">2#风机</span>
        <span v-if="topindex == 1">1#风机</span>
      </div>
      <!-- 风筒风速传感器 -->
      <div class="imgF1"></div>
      <div class="imgF2"></div>
    </div>
  </view>
</template>
<script>
export default {
  components: {},
  data: function () {
    return {
      fengliangUp: "", // 风量上限
      fengliangDown: "", // 风量下限
      controTypeName: "变频器频率",
      // 界面风机动画

      // 控制类型 1 变频器频率 2 需风量
      controlType: "1",
      loading: "", // 数据加载
      yMax1: 100,
      yMax2: 10,
      yMax3: 1000,
      topindex: 1,
      textColor: "#000",
      option1: {},
      nowfengji: "",
      reverseVal: "",
    };
  },
  props: [
    "door1",
    "topdoor1",
    "fundoor1",
    "door2",
    "topdoor2",
    "fundoor2",
    "groupType",
    "fanMsStatus",
  ],
  created() {
    // this.myInterval()
  },
  watch: {
    fanMsStatus(val) {
      if (val == false) {
        this.reverseVal = "reverse-";
      } else {
        this.reverseVal = "";
      }
    },
  },
  // 获取第一页实时数据
  beforeMount: function (e) {
    var than = this;
  },
  methods: {
    // 顶部风机序号值
    setTopIndex(val) {
      this.topindex = val;
    },
    // 根据当前运行分机，设置动画
    setQidongfengji(val) {
      if (this.nowfengji != val) {
        this.nowfengji = val;
        this.setFengjiDonghua();
      }
    },
    // 风机动画
    setFengjiDonghua() {
      if (this.nowfengji == "2") {
        document.getElementById("box1").style.animationPlayState = "running";
        document.getElementById("box1").style.WebkitAnimationPlayState =
          "running";
        document.getElementById("box2").style.animationPlayState = "paused";
        document.getElementById("box2").style.WebkitAnimationPlayState =
          "paused";
      } else if (this.nowfengji == "1") {
        document.getElementById("box2-s").style.animationPlayState = "running";
        document.getElementById("box2-s").style.WebkitAnimationPlayState =
          "running";
        document.getElementById("box1-s").style.animationPlayState = "paused";
        document.getElementById("box1-s").style.WebkitAnimationPlayState =
          "paused";
      } else {
        document.getElementById("box2").style.animationPlayState = "paused";
        document.getElementById("box2").style.WebkitAnimationPlayState =
          "paused";
        document.getElementById("box2-s").style.animationPlayState = "paused";
        document.getElementById("box2-s").style.WebkitAnimationPlayState =
          "paused";
        document.getElementById("box1").style.animationPlayState = "paused";
        document.getElementById("box1").style.WebkitAnimationPlayState =
          "paused";
        document.getElementById("box1-s").style.animationPlayState = "paused";
        document.getElementById("box1-s").style.WebkitAnimationPlayState =
          "paused";
      }
    },
  },
  computed: {},
  mounted() {},
  destroyed() {},
};
</script>

<style scoped>
div.pageback {
  height: calc(60% - 50px);
  min-height: 350px;
  background-image: url(/static/mainfan/page-back.png);
  background-size: 100% 100%;
}
div.ventilate {
  margin-top: 12px;
  width: calc(100vw - 20px);
  height: calc(60% - 50px);
  min-height: 330px;
  background-image: url(/static/mainfan/main_ventilate_new.png);
  background-size: 100% 100%;
  perspective: 800px;
}
div.arrowpic1,
div.arrowpic2,
div.arrowpic3,
div.arrowpic4,
div.arrowpic5,
div.arrowpic6,
div.arrowpic7,
div.arrowpic8,
div.arrowpic9,
div.arrowpic10,
div.arrowpic1-2,
div.arrowpic2-2,
div.arrowpic3-2,
div.arrowpic4-2,
div.arrowpic5-2,
div.arrowpic6-2,
div.arrowpic7-2,
div.arrowpic8-2,
div.arrowpic9-2,
div.arrowpic10-2,
div.arrowpic1-3,
div.arrowpic2-3,
div.arrowpic3-3,
div.arrowpic4-3,
div.arrowpic5-3,
div.arrowpic6-3,
div.arrowpic7-3,
div.arrowpic8-3,
div.arrowpic9-3,
div.arrowpic10-3,
div.arrowpic1-4,
div.arrowpic2-4,
div.arrowpic3-4,
div.arrowpic4-4,
div.arrowpic5-4,
div.arrowpic6-4,
div.arrowpic7-4,
div.arrowpic8-4,
div.arrowpic9-4,
div.arrowpic10-4 {
  position: absolute;
  right: 40px;
  opacity: 0;
  top: 96px;
  width: 30px;
  height: 15px;
  box-sizing: border-box;
  float: right;
  z-index: 100;
  transition: all 2s ease;
  background-image: url(/static/mainfan/arrow-icon.png);
  background-size: 100% 100%;
}

div.reverse-arrowpic1,
div.reverse-arrowpic2,
div.reverse-arrowpic3,
div.reverse-arrowpic4,
div.reverse-arrowpic5,
div.reverse-arrowpic6,
div.reverse-arrowpic7,
div.reverse-arrowpic8,
div.reverse-arrowpic9,
div.reverse-arrowpic10,
div.reverse-arrowpic1-2,
div.reverse-arrowpic2-2,
div.reverse-arrowpic3-2,
div.reverse-arrowpic4-2,
div.reverse-arrowpic5-2,
div.reverse-arrowpic6-2,
div.reverse-arrowpic7-2,
div.reverse-arrowpic8-2,
div.reverse-arrowpic9-2,
div.reverse-arrowpic10-2,
div.reverse-arrowpic1-3,
div.reverse-arrowpic2-3,
div.reverse-arrowpic3-3,
div.reverse-arrowpic4-3,
div.reverse-arrowpic5-3,
div.reverse-arrowpic6-3,
div.reverse-arrowpic7-3,
div.reverse-arrowpic8-3,
div.reverse-arrowpic9-3,
div.reverse-arrowpic10-3,
div.reverse-arrowpic1-4,
div.reverse-arrowpic2-4,
div.reverse-arrowpic3-4,
div.reverse-arrowpic4-4,
div.reverse-arrowpic5-4,
div.reverse-arrowpic6-4,
div.reverse-arrowpic7-4,
div.reverse-arrowpic8-4,
div.reverse-arrowpic9-4,
div.reverse-arrowpic10-4 {
  position: absolute;
  right: 40px;
  opacity: 0;
  top: 96px;
  width: 30px;
  height: 15px;
  box-sizing: border-box;
  float: right;
  z-index: 100;
  transition: all 2s ease;
  background-image: url(/static/mainfan/arrow-icon.png);
  background-size: 100% 100%;
}
</style>
<style scoped>
@media screen and (max-width: 4096px) {
  .box {
    position: absolute;
    transform: perspective(1000px) rotateY(-23deg);
    width: 1%;
    height: 20%;
    transform-style: preserve-3d;
  }
  .box-s {
    position: absolute;
    transform: perspective(1000px) rotateY(-23deg);
    width: 1%;
    height: 20%;
    transform-style: preserve-3d;
  }
}
@media screen and (min-width: 4096px) {
  .box {
    position: absolute;
    transform: perspective(1000px) rotateY(21deg);
    width: 1%;
    height: 20%;
    transform-style: preserve-3d;
  }
  .box-s {
    position: absolute;
    transform: perspective(1000px) rotateY(21deg);
    width: 1%;
    height: 20%;
    transform-style: preserve-3d;
  }
}
.doordivb {
  position: absolute;
  width: 100%;
  height: 100%;
  /* background-image: url(/static/aminfandoor-new-1.png); */
  background-size: 100% 100%;
}
.door1 {
  position: absolute;
  transform: scaleX(0.1) scaleY(0.5);
  width: 100%;
  height: 100%;
  top: -2px;
  left: 0px;
  transition: all 2s ease;
  transform-origin: 100% 100%;
  background-image: url(/static/mainfan/fun-door-new-1.png);
  background-size: 100% 100%;
}
.door2 {
  position: absolute;
  transform: scaleX(1) scaleY(1);
  width: 100%;
  height: 100%;
  top: -2px;
  left: 0px;
  transition: all 2s ease;
  transform-origin: 100% 100%;
  background-image: url(/static/mainfan/fun-door-new-1.png);
  background-size: 100% 100%;
}
.fundoor {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url(/static/mainfan/fun-door-new-1.png);
  background-size: 100% 100%;
}
.fundoor1 {
  position: absolute;
  transform: scaleX(0);
  width: 100%;
  height: 100%;
  top: 1px;
  left: 1px;
  transition: all 2s ease;
  background-image: url(/static/mainfan/fun-door-new-2.png);
  background-size: 100% 100%;
}
.fundoor2 {
  position: absolute;
  transform: scaleX(1);
  width: 100%;
  height: 100%;
  top: 1px;
  left: 1px;
  transition: all 2s ease;
  background-image: url(/static/mainfan/fun-door-new-2.png);
  background-size: 100% 100%;
}
.topwindow {
  position: absolute;
  width: 100%;
  height: 100%;
  /* background-image: url(../././assets/img/topwindow-1.png); */
  background-size: 100% 100%;
}
.topwindow1 {
  position: absolute;
  transform: scaleY(0.05);
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  transition: all 2s ease;
  transform-origin: 100% 0%;
  background-image: url(/static/mainfan/topwindow-new-2.png);
  background-size: 100% 100%;
}
.topwindow2 {
  position: absolute;
  transform: scaleY(1);
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  transition: all 2s ease;
  transform-origin: 100% 0%;
  background-image: url(/static/mainfan/topwindow-new-2.png);
  background-size: 100% 100%;
}
.box::before,
.box-s::before {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 0;
  width: 50%;
  height: 10px;
  background: #000;
  filter: blur(10px);
  opacity: 0.6;
  transform: rotateX(90deg);
}
.box .zz {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: animate 5s linear infinite;
  animation-play-state: paused;
  -webkit-animation-play-state: paused;
}
.box .fz {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: animateFz 5s linear infinite;
  animation-play-state: paused;
  -webkit-animation-play-state: paused;
}
.box-s .zz1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: animate2 5s linear infinite;
  animation-play-state: paused;
  -webkit-animation-play-state: paused;
}
.box-s .fz1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: animateFz1 5s linear infinite;
  animation-play-state: paused;
  -webkit-animation-play-state: paused;
}
.box div span,
.box-s div span {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, #f1f1f1, #999, #f1f1f1);
  border-radius: 15px;
}

.box div span:nth-child(1),
.box-s div span:nth-child(1) {
  transform: rotateX(0deg);
}
.box div span:nth-child(2),
.box-s div span:nth-child(2) {
  transform: rotateX(45deg);
}
.box div span:nth-child(3),
.box-s div span:nth-child(3) {
  transform: rotateX(-45deg);
}
.box div span:nth-child(4),
.box-s div span:nth-child(4) {
  transform: rotateX(90deg);
}
div.box-right {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url(/static/mainfan/fengji-right2.png);
  background-size: 100% 100%;
}
div.box-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(/static/mainfan/fengji-left.png);
  background-size: 100% 100%;
}
@keyframes animate {
  0% {
    transform: perspective(1000px) rotateX(0deg);
  }
  100% {
    transform: perspective(1000px) rotateX(360deg);
  }
}
@keyframes animateFz {
  0% {
    transform: perspective(1000px) rotateX(360deg);
  }
  100% {
    transform: perspective(1000px) rotateX(0deg);
  }
}
@keyframes animate2 {
  0% {
    transform: perspective(1000px) rotateX(360deg);
  }
  100% {
    transform: perspective(1000px) rotateX(0deg);
  }
}

@keyframes animateFz1 {
  0% {
    transform: perspective(1000px) rotateX(0deg);
  }
  100% {
    transform: perspective(1000px) rotateX(360deg);
  }
}
</style>
<style scoped>
.arrowpic1 {
  position: relative;
  animation: myfirstani1 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirstani1 20s infinite linear;
}

@keyframes myfirstani1 {
  0% {
    right: 0%;
    top: 48%;
    -webkit-transform: rotate(0deg);
    opacity: 1;
  }
  18% {
    right: 12%;
    top: 48%;
    -webkit-transform: rotate(0deg);
    opacity: 1;
  }
  20% {
    right: 14%;
    top: 46%;
    -webkit-transform: rotate(30deg);
    opacity: 1;
  }
  30% {
    right: 22%;
    top: 22%;
    -webkit-transform: rotate(30deg);
    opacity: 1;
  }
  32% {
    right: 24%;
    top: 20%;
    -webkit-transform: rotate(0deg);
    opacity: 1;
  }
  92% {
    right: 86%;
    top: 20%;
    -webkit-transform: rotate(0deg);
    opacity: 1;
  }
  94% {
    right: 88%;
    top: 18%;
    -webkit-transform: rotate(90deg);
    opacity: 1;
  }
  98% {
    right: 88%;
    top: 10%;
    -webkit-transform: rotate(90deg);
    opacity: 1;
  }
  100% {
    right: 88%;
    top: 0%;
    -webkit-transform: rotate(90deg);
    opacity: 0;
  }
}

@-webkit-keyframes myfirstani1 /* Safari 和 Chrome */ {
  0% {
    right: 0%;
    top: 48%;
    -webkit-transform: rotate(0deg);
    opacity: 1;
  }
  18% {
    right: 12%;
    top: 48%;
    -webkit-transform: rotate(0deg);
    opacity: 1;
  }
  20% {
    right: 14%;
    top: 46%;
    -webkit-transform: rotate(30deg);
    opacity: 1;
  }
  30% {
    right: 22%;
    top: 22%;
    -webkit-transform: rotate(30deg);
    opacity: 1;
  }
  32% {
    right: 24%;
    top: 20%;
    -webkit-transform: rotate(0deg);
    opacity: 1;
  }
  92% {
    right: 94%;
    top: 20%;
    -webkit-transform: rotate(0deg);
    opacity: 1;
  }
  94% {
    right: 95%;
    top: 18%;
    -webkit-transform: rotate(90deg);
    opacity: 1;
  }
  98% {
    right: 95%;
    top: 10%;
    -webkit-transform: rotate(90deg);
    opacity: 1;
  }
  100% {
    right: 95%;
    top: 7%;
    -webkit-transform: rotate(90deg);
    opacity: 0;
  }
}

.arrowpic2 {
  position: relative;
  animation-delay: -18s;
  animation: myfirstani1 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirstani1 20s infinite linear;
  -webkit-animation-delay: -18s;
}

.arrowpic3 {
  position: relative;
  animation-delay: -16s;
  animation: myfirstani1 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirstani1 20s infinite linear;
  -webkit-animation-delay: -16s;
}

.arrowpic4 {
  position: relative;
  animation-delay: -14s;
  animation: myfirstani1 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirstani1 20s infinite linear;
  -webkit-animation-delay: -14s;
}

.arrowpic5 {
  position: relative;
  animation-delay: -12s;
  animation: myfirstani1 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirstani1 20s infinite linear;
  -webkit-animation-delay: -12s;
}

.arrowpic6 {
  position: relative;
  animation-delay: -10s;
  animation: myfirstani1 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirstani1 20s infinite linear;
  -webkit-animation-delay: -10s;
}

.arrowpic7 {
  position: relative;
  animation-delay: -8s;
  animation: myfirstani1 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirstani1 20s infinite linear;
  -webkit-animation-delay: -8s;
}

.arrowpic8 {
  position: relative;
  animation-delay: -6s;
  animation: myfirstani1 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirstani1 20s infinite linear;
  -webkit-animation-delay: -6s;
}

.arrowpic9 {
  position: relative;
  animation-delay: -4s;
  animation: myfirstani1 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirstani1 20s infinite linear;
  -webkit-animation-delay: -4s;
}

.arrowpic10 {
  position: relative;
  animation-delay: -2s;
  animation: myfirstani1 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirstani1 20s infinite linear;
  -webkit-animation-delay: -2s;
}
.arrowpic1-2 {
  position: relative;
  animation: myfirstani1-2 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirstani1-2 20s infinite linear;
}

@keyframes myfirstani1-2 {
  0% {
    right: 0%;
    top: 48%;
    -webkit-transform: rotate(0deg);
    opacity: 1;
  }
  15% {
    right: 12%;
    top: 48%;
    -webkit-transform: rotate(0deg);
    opacity: 1;
  }
  17% {
    right: 14%;
    top: 50%;
    -webkit-transform: rotate(-30deg);
    opacity: 1;
  }
  29% {
    right: 22%;
    top: 68%;
    -webkit-transform: rotate(-30deg);
    opacity: 1;
  }
  31% {
    right: 24%;
    top: 69%;
    -webkit-transform: rotate(0deg);
    opacity: 1;
  }

  92% {
    right: 94%;
    top: 69%;
    -webkit-transform: rotate(0deg);
    opacity: 1;
  }
  94% {
    right: 95%;
    top: 67%;
    -webkit-transform: rotate(90deg);
    opacity: 1;
  }
  98% {
    right: 95%;
    top: 58%;
    -webkit-transform: rotate(90deg);
    opacity: 1;
  }
  100% {
    right: 95%;
    top: 45%;
    -webkit-transform: rotate(90deg);
    opacity: 0;
  }
}

@-webkit-keyframes myfirstani1-2 /* Safari 和 Chrome */ {
  0% {
    right: 0%;
    top: 48%;
    -webkit-transform: rotate(0deg);
    opacity: 1;
  }
  15% {
    right: 12%;
    top: 48%;
    -webkit-transform: rotate(0deg);
    opacity: 1;
  }
  17% {
    right: 14%;
    top: 50%;
    -webkit-transform: rotate(-30deg);
    opacity: 1;
  }
  29% {
    right: 22%;
    top: 68%;
    -webkit-transform: rotate(-30deg);
    opacity: 1;
  }
  31% {
    right: 24%;
    top: 69%;
    -webkit-transform: rotate(0deg);
    opacity: 1;
  }

  92% {
    right: 94%;
    top: 69%;
    -webkit-transform: rotate(0deg);
    opacity: 1;
  }
  94% {
    right: 95%;
    top: 67%;
    -webkit-transform: rotate(90deg);
    opacity: 1;
  }
  98% {
    right: 95%;
    top: 58%;
    -webkit-transform: rotate(90deg);
    opacity: 1;
  }
  100% {
    right: 95%;
    top: 45%;
    -webkit-transform: rotate(90deg);
    opacity: 0;
  }
}

.arrowpic2-2 {
  position: relative;
  animation-delay: -18s;
  animation: myfirstani1-2 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirstani1-2 20s infinite linear;
  -webkit-animation-delay: -18s;
}

.arrowpic3-2 {
  position: relative;
  animation-delay: -16s;
  animation: myfirstani1-2 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirstani1-2 20s infinite linear;
  -webkit-animation-delay: -16s;
}

.arrowpic4-2 {
  position: relative;
  animation-delay: -14s;
  animation: myfirstani1-2 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirstani1-2 20s infinite linear;
  -webkit-animation-delay: -14s;
}

.arrowpic5-2 {
  position: relative;
  animation-delay: -12s;
  animation: myfirstani1-2 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirstani1-2 20s infinite linear;
  -webkit-animation-delay: -12s;
}

.arrowpic6-2 {
  position: relative;
  animation-delay: -10s;
  animation: myfirstani1-2 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirstani1-2 20s infinite linear;
  -webkit-animation-delay: -10s;
}

.arrowpic7-2 {
  position: relative;
  animation-delay: -8s;
  animation: myfirstani1-2 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirstani1-2 20s infinite linear;
  -webkit-animation-delay: -8s;
}

.arrowpic8-2 {
  position: relative;
  animation-delay: -6s;
  animation: myfirstani1-2 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirstani1-2 20s infinite linear;
  -webkit-animation-delay: -6s;
}

.arrowpic9-2 {
  position: relative;
  animation-delay: -4s;
  animation: myfirstani1-2 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirstani1-2 20s infinite linear;
  -webkit-animation-delay: -4s;
}

.arrowpic10-2 {
  position: relative;
  animation-delay: -2s;
  animation: myfirstani1-2 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirstani1-2 20s infinite linear;
  -webkit-animation-delay: -2s;
}

.arrowpic1-3 {
  position: relative;
  animation: myfirstani1-3 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirstani1-3 20s infinite linear;
}

@keyframes myfirstani1-3 {
  0% {
    right: 41.5%;
    top: 0%;
    -webkit-transform: rotate(-90deg);
    opacity: 1;
  }
  5% {
    right: 41.5%;
    top: 16%;
    -webkit-transform: rotate(-90deg);
    opacity: 1;
  }
  8% {
    right: 43.5%;
    top: 20%;
    -webkit-transform: rotate(0deg);
    opacity: 1;
  }

  92% {
    right: 94%;
    top: 20%;
    -webkit-transform: rotate(0deg);
    opacity: 1;
  }
  94% {
    right: 95%;
    top: 18%;
    -webkit-transform: rotate(90deg);
    opacity: 1;
  }
  98% {
    right: 95%;
    top: 14%;
    -webkit-transform: rotate(90deg);
    opacity: 1;
  }
  100% {
    right: 95%;
    top: 11%;
    -webkit-transform: rotate(90deg);
    opacity: 0;
  }
}

@-webkit-keyframes myfirstani1-3 /* Safari 和 Chrome */ {
  0% {
    right: 41.5%;
    top: 0%;
    -webkit-transform: rotate(-90deg);
    opacity: 1;
  }
  5% {
    right: 41.5%;
    top: 16%;
    -webkit-transform: rotate(-90deg);
    opacity: 1;
  }
  8% {
    right: 43.5%;
    top: 20%;
    -webkit-transform: rotate(0deg);
    opacity: 1;
  }

  92% {
    right: 94%;
    top: 20%;
    -webkit-transform: rotate(0deg);
    opacity: 1;
  }
  94% {
    right: 95%;
    top: 18%;
    -webkit-transform: rotate(90deg);
    opacity: 1;
  }
  98% {
    right: 95%;
    top: 14%;
    -webkit-transform: rotate(90deg);
    opacity: 1;
  }
  100% {
    right: 95%;
    top: 11%;
    -webkit-transform: rotate(90deg);
    opacity: 0;
  }
}

.arrowpic2-3 {
  position: relative;
  animation-delay: -18s;
  animation: myfirstani1-3 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirstani1-3 20s infinite linear;
  -webkit-animation-delay: -18s;
}

.arrowpic3-3 {
  position: relative;
  animation-delay: -16s;
  animation: myfirstani1-3 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirstani1-3 20s infinite linear;
  -webkit-animation-delay: -16s;
}

.arrowpic4-3 {
  position: relative;
  animation-delay: -14s;
  animation: myfirstani1-3 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirstani1-3 20s infinite linear;
  -webkit-animation-delay: -14s;
}

.arrowpic5-3 {
  position: relative;
  animation-delay: -12s;
  animation: myfirstani1-3 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirstani1-3 20s infinite linear;
  -webkit-animation-delay: -12s;
}

.arrowpic6-3 {
  position: relative;
  animation-delay: -10s;
  animation: myfirstani1-3 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirstani1-3 20s infinite linear;
  -webkit-animation-delay: -10s;
}

.arrowpic7-3 {
  position: relative;
  animation-delay: -8s;
  animation: myfirstani1-3 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirstani1-3 20s infinite linear;
  -webkit-animation-delay: -8s;
}

.arrowpic8-3 {
  position: relative;
  animation-delay: -6s;
  animation: myfirstani1-3 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirstani1-3 20s infinite linear;
  -webkit-animation-delay: -6s;
}

.arrowpic9-3 {
  position: relative;
  animation-delay: -4s;
  animation: myfirstani1-3 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirstani1-3 20s infinite linear;
  -webkit-animation-delay: -4s;
}

.arrowpic10-3 {
  position: relative;
  animation-delay: -2s;
  animation: myfirstani1-3 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirstani1-3 20s infinite linear;
  -webkit-animation-delay: -2s;
}

.arrowpic1-4 {
  position: relative;
  animation: myfirstani1-4 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirstani1-4 20s infinite linear;
}

@keyframes myfirstani1-4 {
  0% {
    right: 41.5%;
    top: 67%;
    -webkit-transform: rotate(-90deg);
    opacity: 1;
  }
  6% {
    right: 41.5%;
    top: 81%;
    -webkit-transform: rotate(-90deg);
    opacity: 1;
  }
  8% {
    right: 43.5%;
    top: 84%;
    -webkit-transform: rotate(0deg);
    opacity: 1;
  }

  92% {
    right: 94%;
    top: 84%;
    -webkit-transform: rotate(0deg);
    opacity: 1;
  }
  94% {
    right: 95%;
    top: 82%;
    -webkit-transform: rotate(90deg);
    opacity: 1;
  }
  98% {
    right: 95%;
    top: 78%;
    -webkit-transform: rotate(90deg);
    opacity: 1;
  }
  100% {
    right: 95%;
    top: 75%;
    -webkit-transform: rotate(90deg);
    opacity: 0;
  }
}

@-webkit-keyframes myfirstani1-4 /* Safari 和 Chrome */ {
  0% {
    right: 41.5%;
    top: 67%;
    -webkit-transform: rotate(-90deg);
    opacity: 1;
  }
  6% {
    right: 41.5%;
    top: 81%;
    -webkit-transform: rotate(-90deg);
    opacity: 1;
  }
  8% {
    right: 43.5%;
    top: 84%;
    -webkit-transform: rotate(0deg);
    opacity: 1;
  }
  98% {
    right: 97%;
    top: 84%;
    -webkit-transform: rotate(0deg);
    opacity: 1;
  }
  100% {
    right: 98%;
    top: 84%;
    -webkit-transform: rotate(0deg);
    opacity: 0;
  }
}

.arrowpic2-4 {
  position: relative;
  animation-delay: -18s;
  animation: myfirstani1-4 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirstani1-4 20s infinite linear;
  -webkit-animation-delay: -18s;
}

.arrowpic3-4 {
  position: relative;
  animation-delay: -16s;
  animation: myfirstani1-4 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirstani1-4 20s infinite linear;
  -webkit-animation-delay: -16s;
}

.arrowpic4-4 {
  position: relative;
  animation-delay: -14s;
  animation: myfirstani1-4 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirstani1-4 20s infinite linear;
  -webkit-animation-delay: -14s;
}

.arrowpic5-4 {
  position: relative;
  animation-delay: -12s;
  animation: myfirstani1-4 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirstani1-4 20s infinite linear;
  -webkit-animation-delay: -12s;
}

.arrowpic6-4 {
  position: relative;
  animation-delay: -10s;
  animation: myfirstani1-4 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirstani1-4 20s infinite linear;
  -webkit-animation-delay: -10s;
}

.arrowpic7-4 {
  position: relative;
  animation-delay: -8s;
  animation: myfirstani1-4 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirstani1-4 20s infinite linear;
  -webkit-animation-delay: -8s;
}

.arrowpic8-4 {
  position: relative;
  animation-delay: -6s;
  animation: myfirstani1-4 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirstani1-4 20s infinite linear;
  -webkit-animation-delay: -6s;
}

.arrowpic9-4 {
  position: relative;
  animation-delay: -4s;
  animation: myfirstani1-4 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirstani1-4 20s infinite linear;
  -webkit-animation-delay: -4s;
}

.arrowpic10-4 {
  position: relative;
  animation-delay: -2s;
  animation: myfirstani1-4 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirstani1-4 20s infinite linear;
  -webkit-animation-delay: -2s;
}

.reverse-arrowpic1 {
  position: relative;
  animation: reverse-myfirstani1 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: reverse-myfirstani1 20s infinite linear;
}

@keyframes reverse-myfirstani1 {
  0% {
    right: 88%;
    top: 0%;
    -webkit-transform: rotate(270deg);
    opacity: 0;
  }
  2% {
    right: 88%;
    top: 10%;
    -webkit-transform: rotate(270deg);
    opacity: 1;
  }
  6% {
    right: 88%;
    top: 18%;
    -webkit-transform: rotate(180deg);
    opacity: 1;
  }
  8% {
    right: 86%;
    top: 20%;
    -webkit-transform: rotate(180deg);
    opacity: 1;
  }
  68% {
    right: 24%;
    top: 20%;
    -webkit-transform: rotate(180deg);
    opacity: 1;
  }
  70% {
    right: 22%;
    top: 22%;
    -webkit-transform: rotate(210deg);
    opacity: 1;
  }
  80% {
    right: 14%;
    top: 46%;
    -webkit-transform: rotate(210deg);
    opacity: 1;
  }
  82% {
    right: 12%;
    top: 48%;
    -webkit-transform: rotate(180deg);
    opacity: 1;
  }
  100% {
    right: 0%;
    top: 48%;
    -webkit-transform: rotate(180deg);
    opacity: 1;
  }
}

@-webkit-keyframes reverse-myfirstani1 /* Safari 和 Chrome */ {
  0% {
    right: 88%;
    top: 0%;
    -webkit-transform: rotate(270deg);
    opacity: 0;
  }
  2% {
    right: 88%;
    top: 10%;
    -webkit-transform: rotate(270deg);
    opacity: 1;
  }
  6% {
    right: 88%;
    top: 18%;
    -webkit-transform: rotate(180deg);
    opacity: 1;
  }
  8% {
    right: 86%;
    top: 20%;
    -webkit-transform: rotate(180deg);
    opacity: 1;
  }
  68% {
    right: 24%;
    top: 20%;
    -webkit-transform: rotate(180deg);
    opacity: 1;
  }
  70% {
    right: 22%;
    top: 22%;
    -webkit-transform: rotate(210deg);
    opacity: 1;
  }
  80% {
    right: 14%;
    top: 46%;
    -webkit-transform: rotate(210deg);
    opacity: 1;
  }
  82% {
    right: 12%;
    top: 48%;
    -webkit-transform: rotate(180deg);
    opacity: 1;
  }
  100% {
    right: 0%;
    top: 48%;
    -webkit-transform: rotate(180deg);
    opacity: 1;
  }
}

.reverse-arrowpic2 {
  position: relative;
  animation-delay: -18s;
  animation: reverse-myfirstani1 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: reverse-myfirstani1 20s infinite linear;
  -webkit-animation-delay: -18s;
}

.reverse-arrowpic3 {
  position: relative;
  animation-delay: -16s;
  animation: reverse-myfirstani1 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: reverse-myfirstani1 20s infinite linear;
  -webkit-animation-delay: -16s;
}

.reverse-arrowpic4 {
  position: relative;
  animation-delay: -14s;
  animation: reverse-myfirstani1 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: reverse-myfirstani1 20s infinite linear;
  -webkit-animation-delay: -14s;
}

.reverse-arrowpic5 {
  position: relative;
  animation-delay: -12s;
  animation: reverse-myfirstani1 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: reverse-myfirstani1 20s infinite linear;
  -webkit-animation-delay: -12s;
}

.reverse-arrowpic6 {
  position: relative;
  animation-delay: -10s;
  animation: reverse-myfirstani1 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: reverse-myfirstani1 20s infinite linear;
  -webkit-animation-delay: -10s;
}

.reverse-arrowpic7 {
  position: relative;
  animation-delay: -8s;
  animation: reverse-myfirstani1 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: reverse-myfirstani1 20s infinite linear;
  -webkit-animation-delay: -8s;
}

.reverse-arrowpic8 {
  position: relative;
  animation-delay: -6s;
  animation: reverse-myfirstani1 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: reverse-myfirstani1 20s infinite linear;
  -webkit-animation-delay: -6s;
}

.reverse-arrowpic9 {
  position: relative;
  animation-delay: -4s;
  animation: reverse-myfirstani1 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: reverse-myfirstani1 20s infinite linear;
  -webkit-animation-delay: -4s;
}

.reverse-arrowpic10 {
  position: relative;
  animation-delay: -2s;
  animation: reverse-myfirstani1 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: reverse-myfirstani1 20s infinite linear;
  -webkit-animation-delay: -2s;
}
.reverse-arrowpic1-2 {
  position: relative;
  animation: reverse-myfirstani1-2 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: reverse-myfirstani1-2 20s infinite linear;
}

@keyframes reverse-myfirstani1-2 {
  0% {
    right: 95%;
    top: 45%;
    -webkit-transform: rotate(270deg);
    opacity: 0;
  }
  2% {
    right: 95%;
    top: 58%;
    -webkit-transform: rotate(270deg);
    opacity: 1;
  }
  6% {
    right: 95%;
    top: 67%;
    -webkit-transform: rotate(270deg);
    opacity: 1;
  }
  8% {
    right: 94%;
    top: 69%;
    -webkit-transform: rotate(180deg);
    opacity: 1;
  }
  69% {
    right: 24%;
    top: 69%;
    -webkit-transform: rotate(180deg);
    opacity: 1;
  }
  71% {
    right: 22%;
    top: 68%;
    -webkit-transform: rotate(150deg);
    opacity: 1;
  }
  83% {
    right: 14%;
    top: 50%;
    -webkit-transform: rotate(150deg);
    opacity: 1;
  }
  85% {
    right: 12%;
    top: 48%;
    -webkit-transform: rotate(180deg);
    opacity: 1;
  }
  100% {
    right: 0%;
    top: 48%;
    -webkit-transform: rotate(180deg);
    opacity: 1;
  }
}

@-webkit-keyframes reverse-myfirstani1-2 /* Safari 和 Chrome */ {
  0% {
    right: 95%;
    top: 45%;
    -webkit-transform: rotate(270deg);
    opacity: 0;
  }
  2% {
    right: 95%;
    top: 58%;
    -webkit-transform: rotate(270deg);
    opacity: 1;
  }
  6% {
    right: 95%;
    top: 67%;
    -webkit-transform: rotate(270deg);
    opacity: 1;
  }
  8% {
    right: 94%;
    top: 69%;
    -webkit-transform: rotate(180deg);
    opacity: 1;
  }
  69% {
    right: 24%;
    top: 69%;
    -webkit-transform: rotate(180deg);
    opacity: 1;
  }
  71% {
    right: 22%;
    top: 68%;
    -webkit-transform: rotate(150deg);
    opacity: 1;
  }
  83% {
    right: 14%;
    top: 50%;
    -webkit-transform: rotate(150deg);
    opacity: 1;
  }
  85% {
    right: 12%;
    top: 48%;
    -webkit-transform: rotate(180deg);
    opacity: 1;
  }
  100% {
    right: 0%;
    top: 48%;
    -webkit-transform: rotate(180deg);
    opacity: 1;
  }
}

.reverse-arrowpic2-2 {
  position: relative;
  animation-delay: -18s;
  animation: reverse-myfirstani1-2 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: reverse-myfirstani1-2 20s infinite linear;
  -webkit-animation-delay: -18s;
}

.reverse-arrowpic3-2 {
  position: relative;
  animation-delay: -16s;
  animation: reverse-myfirstani1-2 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: reverse-myfirstani1-2 20s infinite linear;
  -webkit-animation-delay: -16s;
}

.reverse-arrowpic4-2 {
  position: relative;
  animation-delay: -14s;
  animation: reverse-myfirstani1-2 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: reverse-myfirstani1-2 20s infinite linear;
  -webkit-animation-delay: -14s;
}

.reverse-arrowpic5-2 {
  position: relative;
  animation-delay: -12s;
  animation: reverse-myfirstani1-2 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: reverse-myfirstani1-2 20s infinite linear;
  -webkit-animation-delay: -12s;
}

.reverse-arrowpic6-2 {
  position: relative;
  animation-delay: -10s;
  animation: reverse-myfirstani1-2 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: reverse-myfirstani1-2 20s infinite linear;
  -webkit-animation-delay: -10s;
}

.reverse-arrowpic7-2 {
  position: relative;
  animation-delay: -8s;
  animation: reverse-myfirstani1-2 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: reverse-myfirstani1-2 20s infinite linear;
  -webkit-animation-delay: -8s;
}

.reverse-arrowpic8-2 {
  position: relative;
  animation-delay: -6s;
  animation: reverse-myfirstani1-2 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: reverse-myfirstani1-2 20s infinite linear;
  -webkit-animation-delay: -6s;
}

.reverse-arrowpic9-2 {
  position: relative;
  animation-delay: -4s;
  animation: reverse-myfirstani1-2 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: reverse-myfirstani1-2 20s infinite linear;
  -webkit-animation-delay: -4s;
}

.reverse-arrowpic10-2 {
  position: relative;
  animation-delay: -2s;
  animation: reverse-myfirstani1-2 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: reverse-myfirstani1-2 20s infinite linear;
  -webkit-animation-delay: -2s;
}

.reverse-arrowpic1-3 {
  position: relative;
  animation: reverse-myfirstani1-3 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: reverse-myfirstani1-3 20s infinite linear;
}

@keyframes reverse-myfirstani1-3 {
  0% {
    right: 95%;
    top: 11%;
    -webkit-transform: rotate(270deg);
    opacity: 0;
  }
  2% {
    right: 95%;
    top: 14%;
    -webkit-transform: rotate(270deg);
    opacity: 1;
  }
  6% {
    right: 95%;
    top: 18%;
    -webkit-transform: rotate(270deg);
    opacity: 1;
  }
  8% {
    right: 94%;
    top: 20%;
    -webkit-transform: rotate(180deg);
    opacity: 1;
  }
  92% {
    right: 43.5%;
    top: 20%;
    -webkit-transform: rotate(180deg);
    opacity: 1;
  }
  95% {
    right: 41.5%;
    top: 16%;
    -webkit-transform: rotate(90deg);
    opacity: 1;
  }
  100% {
    right: 41.5%;
    top: 0%;
    -webkit-transform: rotate(90deg);
    opacity: 1;
  }
}

@-webkit-keyframes reverse-myfirstani1-3 /* Safari 和 Chrome */ {
  0% {
    right: 95%;
    top: 11%;
    -webkit-transform: rotate(270deg);
    opacity: 0;
  }
  2% {
    right: 95%;
    top: 14%;
    -webkit-transform: rotate(270deg);
    opacity: 1;
  }
  6% {
    right: 95%;
    top: 18%;
    -webkit-transform: rotate(270deg);
    opacity: 1;
  }
  8% {
    right: 94%;
    top: 20%;
    -webkit-transform: rotate(180deg);
    opacity: 1;
  }
  92% {
    right: 43.5%;
    top: 20%;
    -webkit-transform: rotate(180deg);
    opacity: 1;
  }
  95% {
    right: 41.5%;
    top: 16%;
    -webkit-transform: rotate(90deg);
    opacity: 1;
  }
  100% {
    right: 41.5%;
    top: 0%;
    -webkit-transform: rotate(90deg);
    opacity: 1;
  }
}

.reverse-arrowpic2-3 {
  position: relative;
  animation-delay: -18s;
  animation: reverse-myfirstani1-3 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: reverse-myfirstani1-3 20s infinite linear;
  -webkit-animation-delay: -18s;
}

.reverse-arrowpic3-3 {
  position: relative;
  animation-delay: -16s;
  animation: reverse-myfirstani1-3 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: reverse-myfirstani1-3 20s infinite linear;
  -webkit-animation-delay: -16s;
}

.reverse-arrowpic4-3 {
  position: relative;
  animation-delay: -14s;
  animation: reverse-myfirstani1-3 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: reverse-myfirstani1-3 20s infinite linear;
  -webkit-animation-delay: -14s;
}

.reverse-arrowpic5-3 {
  position: relative;
  animation-delay: -12s;
  animation: reverse-myfirstani1-3 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: reverse-myfirstani1-3 20s infinite linear;
  -webkit-animation-delay: -12s;
}

.reverse-arrowpic6-3 {
  position: relative;
  animation-delay: -10s;
  animation: reverse-myfirstani1-3 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: reverse-myfirstani1-3 20s infinite linear;
  -webkit-animation-delay: -10s;
}

.reverse-arrowpic7-3 {
  position: relative;
  animation-delay: -8s;
  animation: reverse-myfirstani1-3 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: reverse-myfirstani1-3 20s infinite linear;
  -webkit-animation-delay: -8s;
}

.reverse-arrowpic8-3 {
  position: relative;
  animation-delay: -6s;
  animation: reverse-myfirstani1-3 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: reverse-myfirstani1-3 20s infinite linear;
  -webkit-animation-delay: -6s;
}

.reverse-arrowpic9-3 {
  position: relative;
  animation-delay: -4s;
  animation: reverse-myfirstani1-3 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: reverse-myfirstani1-3 20s infinite linear;
  -webkit-animation-delay: -4s;
}

.reverse-arrowpic10-3 {
  position: relative;
  animation-delay: -2s;
  animation: reverse-myfirstani1-3 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: reverse-myfirstani1-3 20s infinite linear;
  -webkit-animation-delay: -2s;
}

.reverse-arrowpic1-4 {
  position: relative;
  animation: reverse-myfirstani1-4 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: reverse-myfirstani1-4 20s infinite linear;
}

@keyframes reverse-myfirstani1-4 {
  0% {
    right: 95%;
    top: 75%;
    -webkit-transform: rotate(270deg);
    opacity: 0;
  }
  2% {
    right: 95%;
    top: 78%;
    -webkit-transform: rotate(270deg);
    opacity: 1;
  }
  6% {
    right: 95%;
    top: 82%;
    -webkit-transform: rotate(270deg);
    opacity: 1;
  }
  8% {
    right: 94%;
    top: 84%;
    -webkit-transform: rotate(180deg);
    opacity: 1;
  }
  92% {
    right: 43.5%;
    top: 84%;
    -webkit-transform: rotate(180deg);
    opacity: 1;
  }
  94% {
    right: 41.5%;
    top: 81%;
    -webkit-transform: rotate(90deg);
    opacity: 1;
  }
  100% {
    right: 41.5%;
    top: 67%;
    -webkit-transform: rotate(90deg);
    opacity: 1;
  }
}

@-webkit-keyframes reverse-myfirstani1-4 /* Safari 和 Chrome */ {
  0% {
    right: 95%;
    top: 75%;
    -webkit-transform: rotate(270deg);
    opacity: 0;
  }
  2% {
    right: 95%;
    top: 78%;
    -webkit-transform: rotate(270deg);
    opacity: 1;
  }
  6% {
    right: 95%;
    top: 82%;
    -webkit-transform: rotate(270deg);
    opacity: 1;
  }
  8% {
    right: 94%;
    top: 84%;
    -webkit-transform: rotate(180deg);
    opacity: 1;
  }
  92% {
    right: 43.5%;
    top: 84%;
    -webkit-transform: rotate(180deg);
    opacity: 1;
  }
  94% {
    right: 41.5%;
    top: 81%;
    -webkit-transform: rotate(90deg);
    opacity: 1;
  }
  100% {
    right: 41.5%;
    top: 67%;
    -webkit-transform: rotate(90deg);
    opacity: 1;
  }
}

.reverse-arrowpic2-4 {
  position: relative;
  animation-delay: -18s;
  animation: reverse-myfirstani1-4 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: reverse-myfirstani1-4 20s infinite linear;
  -webkit-animation-delay: -18s;
}

.reverse-arrowpic3-4 {
  position: relative;
  animation-delay: -16s;
  animation: reverse-myfirstani1-4 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: reverse-myfirstani1-4 20s infinite linear;
  -webkit-animation-delay: -16s;
}

.reverse-arrowpic4-4 {
  position: relative;
  animation-delay: -14s;
  animation: reverse-myfirstani1-4 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: reverse-myfirstani1-4 20s infinite linear;
  -webkit-animation-delay: -14s;
}

.reverse-arrowpic5-4 {
  position: relative;
  animation-delay: -12s;
  animation: reverse-myfirstani1-4 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: reverse-myfirstani1-4 20s infinite linear;
  -webkit-animation-delay: -12s;
}

.reverse-arrowpic6-4 {
  position: relative;
  animation-delay: -10s;
  animation: reverse-myfirstani1-4 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: reverse-myfirstani1-4 20s infinite linear;
  -webkit-animation-delay: -10s;
}

.reverse-arrowpic7-4 {
  position: relative;
  animation-delay: -8s;
  animation: reverse-myfirstani1-4 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: reverse-myfirstani1-4 20s infinite linear;
  -webkit-animation-delay: -8s;
}

.reverse-arrowpic8-4 {
  position: relative;
  animation-delay: -6s;
  animation: reverse-myfirstani1-4 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: reverse-myfirstani1-4 20s infinite linear;
  -webkit-animation-delay: -6s;
}

.reverse-arrowpic9-4 {
  position: relative;
  animation-delay: -4s;
  animation: reverse-myfirstani1-4 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: reverse-myfirstani1-4 20s infinite linear;
  -webkit-animation-delay: -4s;
}

.reverse-arrowpic10-4 {
  position: relative;
  animation-delay: -2s;
  animation: reverse-myfirstani1-4 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: reverse-myfirstani1-4 20s infinite linear;
  -webkit-animation-delay: -2s;
}
</style>