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

<template>
  <view style="width: 100%; height: 100%">
    <div class="pageback">
      <div class="ventilate" id="topPic">
        <!-- 进风箭头 -->
        <div
          :class="
            nowfengji == '2' ? 'arrow1' : nowfengji == '1' ? 'arrow1-fan1' : ''
          "
          id="arrow1"
        ></div>
        <div
          :class="
            nowfengji == '2' ? 'arrow2' : nowfengji == '1' ? 'arrow2-fan1' : ''
          "
          id="arrow2"
        ></div>
        <div
          :class="
            nowfengji == '2' ? 'arrow3' : nowfengji == '1' ? 'arrow3-fan1' : ''
          "
          id="arrow3"
        ></div>
        <div
          :class="
            nowfengji == '2' ? 'arrow4' : nowfengji == '1' ? 'arrow4-fan1' : ''
          "
          id="arrow4"
        ></div>
        <div
          :class="
            nowfengji == '2' ? 'arrow5' : nowfengji == '1' ? 'arrow5-fan1' : ''
          "
          id="arrow5"
        ></div>
        <div
          :class="
            nowfengji == '2' ? 'arrow6' : nowfengji == '1' ? 'arrow6-fan1' : ''
          "
          id="arrow6"
        ></div>
        <div
          :class="
            nowfengji == '2' ? 'arrow7' : nowfengji == '1' ? 'arrow7-fan1' : ''
          "
          id="arrow7"
        ></div>
        <div
          :class="
            nowfengji == '2' ? 'arrow8' : nowfengji == '1' ? 'arrow8-fan1' : ''
          "
          id="arrow8"
        ></div>
        <div
          :class="
            nowfengji == '2' ? 'arrow9' : nowfengji == '1' ? 'arrow9-fan1' : ''
          "
          id="arrow9"
        ></div>
        <div
          :class="
            nowfengji == '2'
              ? 'arrow10'
              : nowfengji == '1'
              ? 'arrow10-fan1'
              : ''
          "
          id="arrow10"
        ></div>
        <!-- 回风箭头 -->
        <div class="arrow101" id="arrow101" v-show="nowfengji != ''"></div>
        <div class="arrow102" id="arrow102" v-show="nowfengji != ''"></div>
        <div class="arrow103" id="arrow103" v-show="nowfengji != ''"></div>
        <div class="arrow104" id="arrow104" v-show="nowfengji != ''"></div>
        <div class="arrow105" id="arrow105" v-show="nowfengji != ''"></div>
        <div class="arrow106" id="arrow106" v-show="nowfengji != ''"></div>
        <!-- <div class="arrow107" id="arrow107"></div>
      <div class="arrow108" id="arrow108"></div>-->
        <!-- 回风 -->
        <div class="arrow201" id="arrow201"></div>
        <div class="arrow202" id="arrow202"></div>
        <div class="arrow203" id="arrow203"></div>
        <div class="arrow204" id="arrow204"></div>
        <div class="arrow205" id="arrow205"></div>
        <div
          style="
            color: #fff;
            font-size: 14px;
            position: absolute;
            top: 12%;
            left: 80%;
            width: auto;
            height: 60px;
          "
          @click="fanclick(1)"
        >
          <span>主风机</span>
        </div>
        <div
          style="
            color: #fff;
            font-size: 14px;
            position: absolute;
            top: 16%;
            left: 80%;
            width: auto;
            height: 60px;
          "
          @click="fanclick(2)"
        >
          <span>备用风机</span>
        </div>
        <!-- 风扇动画展示 -->
        <div class="box2" style="top: 12.8%; right: 29%" @click="fanclick(1)">
          <div id="box2">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
          </div>
        </div>
        <div class="box" style="top: 15.5%; right: 29%" @click="fanclick(2)">
          <div id="box1">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
          </div>
        </div>
      </div>
    </div>
  </view>
</template>

<script>
export default {
  data() {
    return {
      fengliangUp: "", // 风量上限
      fengliangDown: "", // 风量下限
      controTypeName: "变频器频率",
      // 界面风机动画

      // 控制类型 1 变频器频率 2 需风量
      controlType: "1",
      loading: "", // 数据加载
      yMax1: 100,
      yMax2: 10,
      yMax3: 1000,
      textColor: "#000",
      option1: {},
      readData: {},
      nowfengji: "1",
    };
  },
  props: {
    mainFanText: {
      type: String,
      default: "主风机",
    },
    subFanText: {
      type: String,
      default: "备风机",
    },
  },
  methods: {
    setnowfengji(val) {
      if (this.nowfengji != val) {
        this.nowfengji = val;
        this.setFengjiDonghua();
      }
    },
    fanclick(val) {
      this.$emit("fanclick", val);
    },
    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").style.animationPlayState = "running";
        document.getElementById("box2").style.WebkitAnimationPlayState =
          "running";
        document.getElementById("box1").style.animationPlayState = "paused";
        document.getElementById("box1").style.WebkitAnimationPlayState =
          "paused";
      } else {
        document.getElementById("box2").style.animationPlayState = "paused";
        document.getElementById("box2").style.WebkitAnimationPlayState =
          "paused";
        document.getElementById("box1").style.animationPlayState = "paused";
        document.getElementById("box1").style.WebkitAnimationPlayState =
          "paused";
      }
    },
  },
  watch: {},
  onLoad(query) {
    this.setFengjiDonghua();
  },
};
</script>

<style scoped>
div.pageback {
  padding-top: 10px;
  margin-top: 12px;
  width: 100%;
  height: calc(80% - 50px);
  min-height: 350px;
  background-image: url(/static/fan/page-back.png);
  background-size: 100% 100%;
}
div.ventilate {
  min-width: 300px;
  width: 60%;
  margin-left: 10%;
  height: 80%;
  height: calc(80% - 120px);
  min-height: 330px;
  background-image: url(/static/fan/localfan-back.png);
  background-size: 100% 100%;
}
div.arrow1,
div.arrow2,
div.arrow3,
div.arrow4,
div.arrow5,
div.arrow6,
div.arrow7,
div.arrow8,
div.arrow9,
div.arrow10,
div.arrow1-fan1,
div.arrow2-fan1,
div.arrow3-fan1,
div.arrow4-fan1,
div.arrow5-fan1,
div.arrow6-fan1,
div.arrow7-fan1,
div.arrow8-fan1,
div.arrow9-fan1,
div.arrow10-fan1 {
  position: absolute;
  right: 40px;
  opacity: 0;
  top: 96px;
  width: 30px;
  height: 15px;
  box-sizing: border-box;
  float: right;
  z-index: 1;
  transition: all 2s ease;
  background-image: url(/static/fan/arrow-in.png);
  background-size: 100% 100%;
}
div.arrow101,
div.arrow102,
div.arrow103,
div.arrow104,
div.arrow105,
div.arrow106,
div.arrow107,
div.arrow108 {
  position: absolute;
  right: 70px;
  opacity: 0;
  top: 516px;
  width: 30px;
  height: 13px;
  box-sizing: border-box;
  float: right;
  z-index: 1;
  transition: all 2s ease;
  background-image: url(/static/fan/arrow-out.png);
  background-size: 100% 100%;
}
div.arrow201,
div.arrow202,
div.arrow203,
div.arrow204,
div.arrow205 {
  position: absolute;
  right: 0px;
  opacity: 0;
  top: 30px;
  width: 45px;
  height: 23px;
  box-sizing: border-box;
  float: right;
  z-index: 10;
  transition: all 2s ease;
  background-image: url(/static/fan/arrow-in.png);
  background-size: 100% 100%;
}
</style>
<style scoped>
.arrow1 {
  position: relative;
  animation: myfirst1 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirst1 20s infinite linear;
}

@keyframes myfirst1 {
  0% {
    right: 10%;
    top: 16%;
    -webkit-transform: rotate(0deg);
    opacity: 1;
  }
  10% {
    right: 33%;
    top: 16%;
    -webkit-transform: rotate(0deg);
    opacity: 1;
  }
  11% {
    right: 34%;
    top: 15%;
    -webkit-transform: rotate(40deg);
    opacity: 1;
  }
  14% {
    right: 40%;
    top: 13%;
    -webkit-transform: rotate(40deg);
    opacity: 1;
  }
  15% {
    right: 41%;
    top: 13%;
    -webkit-transform: rotate(0deg);
    opacity: 1;
  }
  22% {
    right: 60%;
    top: 13%;
    -webkit-transform: rotate(0deg);
    opacity: 1;
  }
  23% {
    right: 60.5%;
    top: 14%;
    -webkit-transform: rotate(-90deg);
    opacity: 1;
  }
  98% {
    right: 60.5%;
    top: 91%;
    -webkit-transform: rotate(-90deg);
    opacity: 1;
  }
  100% {
    right: 60.5%;
    top: 93%;
    -webkit-transform: rotate(-90deg);
    opacity: 0;
  }
}

@-webkit-keyframes myfirst1 /* Safari 和 Chrome */ {
  0% {
    right: 10%;
    top: 16%;
    -webkit-transform: rotate(0deg);
    opacity: 1;
  }
  10% {
    right: 33%;
    top: 16%;
    -webkit-transform: rotate(0deg);
    opacity: 1;
  }
  11% {
    right: 34%;
    top: 15%;
    -webkit-transform: rotate(30deg);
    opacity: 1;
  }
  14% {
    right: 40%;
    top: 12%;
    -webkit-transform: rotate(30deg);
    opacity: 1;
  }
  15% {
    right: 41%;
    top: 12%;
    -webkit-transform: rotate(0deg);
    opacity: 1;
  }
  22% {
    right: 60%;
    top: 12%;
    -webkit-transform: rotate(0deg);
    opacity: 1;
  }
  23% {
    right: 60.5%;
    top: 13%;
    -webkit-transform: rotate(-90deg);
    opacity: 1;
  }
  98% {
    right: 60.5%;
    top: 91%;
    -webkit-transform: rotate(-90deg);
    opacity: 1;
  }
  100% {
    right: 60.5%;
    top: 93%;
    -webkit-transform: rotate(-90deg);
    opacity: 0;
  }
}

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

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

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

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

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

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

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

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

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

<style scoped>
.arrow101 {
  position: relative;
  animation-delay: -10s;
  animation: myfirst101 12s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirst101 12s infinite linear;
  -webkit-animation-delay: -10s;
}

@keyframes myfirst101 {
  0% {
    right: 62.5%;
    top: 94%;
    -webkit-transform: rotate(-180deg);
    opacity: 1;
  }
  15% {
    right: 73%;
    top: 94%;
    -webkit-transform: rotate(-180deg);
    opacity: 1;
  }
  17% {
    right: 73%;
    top: 93%;
    -webkit-transform: rotate(-90deg);
    opacity: 1;
  }
  62% {
    right: 73%;
    top: 57%;
    -webkit-transform: rotate(-90deg);
    opacity: 1;
  }
  64% {
    right: 73%;
    top: 55%;
    -webkit-transform: rotate(-180deg);
    opacity: 1;
  }
  66% {
    right: 74%;
    top: 55%;
    -webkit-transform: rotate(-180deg);
    opacity: 1;
  }
  90% {
    right: 93%;
    top: 55%;
    -webkit-transform: rotate(-180deg);
    opacity: 1;
  }
  100% {
    right: 98%;
    top: 55%;
    -webkit-transform: rotate(-180deg);
    opacity: 0;
  }
}

@-webkit-keyframes myfirst101 /* Safari 和 Chrome */ {
  0% {
    right: 62.5%;
    top: 94%;
    -webkit-transform: rotate(-180deg);
    opacity: 1;
  }
  15% {
    right: 73%;
    top: 94%;
    -webkit-transform: rotate(-180deg);
    opacity: 1;
  }
  17% {
    right: 73%;
    top: 93%;
    -webkit-transform: rotate(-90deg);
    opacity: 1;
  }
  62% {
    right: 73%;
    top: 57%;
    -webkit-transform: rotate(-90deg);
    opacity: 1;
  }
  64% {
    right: 73%;
    top: 55%;
    -webkit-transform: rotate(-180deg);
    opacity: 1;
  }
  66% {
    right: 74%;
    top: 55%;
    -webkit-transform: rotate(-180deg);
    opacity: 1;
  }
  90% {
    right: 93%;
    top: 55%;
    -webkit-transform: rotate(-180deg);
    opacity: 1;
  }
  100% {
    right: 98%;
    top: 55%;
    -webkit-transform: rotate(-180deg);
    opacity: 0;
  }
}

.arrow102 {
  position: relative;
  animation-delay: -8s;
  animation: myfirst101 12s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirst101 12s infinite linear;
  -webkit-animation-delay: -8s;
}
.arrow103 {
  position: relative;
  animation-delay: -6s;
  animation: myfirst101 12s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirst101 12s infinite linear;
  -webkit-animation-delay: -6s;
}
.arrow104 {
  position: relative;
  animation-delay: -4s;
  animation: myfirst101 12s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirst101 12s infinite linear;
  -webkit-animation-delay: -4s;
}
.arrow105 {
  position: relative;
  animation-delay: -2s;
  animation: myfirst101 12s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirst101 12s infinite linear;
  -webkit-animation-delay: -2s;
}
.arrow106 {
  position: relative;
  animation-delay: 0s;
  animation: myfirst101 12s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirst101 12s infinite linear;
  -webkit-animation-delay: 0s;
}
</style>
<style scoped>
.arrow1-fan1 {
  position: relative;
  animation: myfirst1-fan1 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirst1-fan1 20s infinite linear;
}

@keyframes myfirst1-fan1 {
  0% {
    right: 10%;
    top: 10%;
    -webkit-transform: rotate(0deg);
    opacity: 1;
  }
  10% {
    right: 33%;
    top: 10%;
    -webkit-transform: rotate(0deg);
    opacity: 1;
  }
  11% {
    right: 34%;
    top: 11%;
    -webkit-transform: rotate(-40deg);
    opacity: 1;
  }
  14% {
    right: 40%;
    top: 13%;
    -webkit-transform: rotate(-40deg);
    opacity: 1;
  }
  15% {
    right: 41%;
    top: 13%;
    -webkit-transform: rotate(0deg);
    opacity: 1;
  }
  22% {
    right: 60%;
    top: 13%;
    -webkit-transform: rotate(0deg);
    opacity: 1;
  }
  23% {
    right: 60.5%;
    top: 14%;
    -webkit-transform: rotate(-90deg);
    opacity: 1;
  }
  98% {
    right: 60.5%;
    top: 89%;
    -webkit-transform: rotate(-90deg);
    opacity: 1;
  }
  100% {
    right: 60.5%;
    top: 91%;
    -webkit-transform: rotate(-90deg);
    opacity: 0;
  }
}

@-webkit-keyframes myfirst1-fan1 /* Safari 和 Chrome */ {
  0% {
    right: 10%;
    top: 10%;
    -webkit-transform: rotate(0deg);
    opacity: 1;
  }
  10% {
    right: 33%;
    top: 10%;
    -webkit-transform: rotate(0deg);
    opacity: 1;
  }
  11% {
    right: 34%;
    top: 11%;
    -webkit-transform: rotate(-40deg);
    opacity: 1;
  }
  14% {
    right: 40%;
    top: 13%;
    -webkit-transform: rotate(-40deg);
    opacity: 1;
  }
  15% {
    right: 41%;
    top: 13%;
    -webkit-transform: rotate(0deg);
    opacity: 1;
  }
  22% {
    right: 60%;
    top: 13%;
    -webkit-transform: rotate(0deg);
    opacity: 1;
  }
  23% {
    right: 60.5%;
    top: 14%;
    -webkit-transform: rotate(-90deg);
    opacity: 1;
  }
  98% {
    right: 60.5%;
    top: 89%;
    -webkit-transform: rotate(-90deg);
    opacity: 1;
  }
  100% {
    right: 60.5%;
    top: 91%;
    -webkit-transform: rotate(-90deg);
    opacity: 0;
  }
}

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

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

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

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

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

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

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

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

.arrow10-fan1 {
  position: relative;
  animation-delay: -2s;
  animation: myfirst1-fan1 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirst1-fan1 20s infinite linear;
  -webkit-animation-delay: -2s;
}
</style>

<style scoped>
.arrow201 {
  position: relative;
  animation-delay: -8s;
  animation: myfirst201 10s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirst201 10s infinite linear;
  -webkit-animation-delay: -8s;
}

@keyframes myfirst201 {
  0% {
    right: 0px;
    top: 90px;
    -webkit-transform: rotate(0deg);
    opacity: 0;
  }
  2% {
    right: 10px;
    top: 90px;
    -webkit-transform: rotate(0deg);
    opacity: 1;
  }
  94% {
    right: 530px;
    top: 90px;
    -webkit-transform: rotate(0deg);
    opacity: 1;
  }
  100% {
    right: 570px;
    top: 90px;
    -webkit-transform: rotate(0deg);
    opacity: 0;
  }
}

@-webkit-keyframes myfirst201 /* Safari 和 Chrome */ {
  0% {
    right: 0px;
    top: 90px;
    -webkit-transform: rotate(0deg);
    opacity: 0;
  }
  2% {
    right: 10px;
    top: 90px;
    -webkit-transform: rotate(0deg);
    opacity: 1;
  }
  94% {
    right: 530px;
    top: 90px;
    -webkit-transform: rotate(0deg);
    opacity: 1;
  }
  100% {
    right: 570px;
    top: 90px;
    -webkit-transform: rotate(0deg);
    opacity: 0;
  }
}
.arrow202 {
  position: relative;
  animation-delay: -6s;
  animation: myfirst201 10s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirst201 10s infinite linear;
  -webkit-animation-delay: -6s;
}

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

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

.arrow205 {
  position: relative;
  animation-delay: -0.1s;
  animation: myfirst201 10s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirst201 10s infinite linear;
  -webkit-animation-delay: -0.1s;
}
</style>
<style scoped>
.box,
.box2 {
  position: absolute;
  transform: perspective(1000px) rotateY(-70deg);
  width: 5px;
  height: 15px;
  transform-style: preserve-3d;
}
.box::before,
.box2::before {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 0;
  width: 100%;
  height: 10px;
  background: #000;
  filter: blur(10px);
  opacity: 0.5;
  transform: rotateX(90deg);
}
.box div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: animate 5s linear infinite;
}
.box2 div {
  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 div span,
.box2 div span {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, #f1f1f1, #999, #f1f1f1);
  border-radius: 5px;
}

.box div span:nth-child(1),
.box2 div span:nth-child(1) {
  transform: rotateX(0deg);
}
.box div span:nth-child(2),
.box2 div span:nth-child(2) {
  transform: rotateX(45deg);
}
.box div span:nth-child(3),
.box2 div span:nth-child(3) {
  transform: rotateX(-45deg);
}
.box div span:nth-child(4),
.box2 div span:nth-child(4) {
  transform: rotateX(90deg);
}
@keyframes animate {
  0% {
    transform: perspective(1000px) rotateX(0deg);
  }
  100% {
    transform: perspective(1000px) rotateX(359deg);
  }
}
</style>
<style scoped>
.localT1 {
  position: absolute;
  width: 70px;
}
.localT1 div:nth-child(1) {
  float: left;
  width: 20px;
  height: 20px;
  padding: 2px;
  background: #1515e9;
  font-size: 12px;
  font-weight: 100;
  color: #fff;
  border: 1px solid #000;
  box-shadow: #1515e9 0px 0px 10px;
}
.localT1 div:nth-child(2) {
  float: left;
  width: 40px;
  height: 20px;
  padding-top: 3px;
  text-align: center;
  background: #fd1f0f;
  font-size: 10px;
  font-weight: 300;
  color: #fff;
  border: 1px solid rgb(124, 80, 80);
  box-shadow: #fd1f0f 0px 0px 10px;
}
.localF1 {
  position: absolute;
  width: 62px;
}
.localF1 div:nth-child(1) {
  float: left;
  width: 17px;
  height: 19px;
  padding: 2px;
  background: #a9a9e6;
  font-size: 12px;
  font-weight: 100;
  color: #fff;
  border: 1px solid #000;
  box-shadow: #a9a9e6 0px 0px 10px;
}
.localF1 div:nth-child(2) {
  float: left;
  width: 35px;
  height: 20px;
  padding-top: 3px;
  text-align: center;
  background: #16f179;
  font-size: 10px;
  font-weight: 300;
  color: #fff;
  border: 1px solid rgb(118, 153, 108);
  box-shadow: #16f179 0px 0px 10px;
}

.imgF2 {
  top: 80%;
  right: 62%;
  position: absolute;
  width: 20px;
  height: 4px;
  background: #f80404;
  border: 1px solid rgb(182, 85, 85);
  box-shadow: #f80404 0px 0px 10px;
}
.imgF1 {
  top: 12.5%;
  right: 53%;
  position: absolute;
  height: 18px;
  width: 4px;
  background: #f80404;
  border: 1px solid rgb(182, 85, 85);
  box-shadow: #f80404 0px 0px 10px;
}
</style>