vue中的动画小组件

<div class="aqi-left">
    <div class="big-circle"></div>
    <div class="middle-circle circle" :style="{background:'url('+bgImg+') no-repeat',backgroundSize:'100% 100%'}"></div>
    <div class="smallCircle"></div>
    <span class="number">20</span>
    <span class="title">AQI</span>
</div>

bgImg: require("@/assets/images/optimal.png"),

  .aqi-left {
    width: 5.5vw;
    height: 5.5vw;
    position: relative;
    margin-right: 30px;
    color: #fff;
    & > img {
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }
    & > span {
      display: block;
      width: 100%;
      text-align: center;
    }
    .number {
      position: absolute;
      top: 1.75vw;
      font-size: 22px;
      font-weight: bold;
      color: #303133;
    }
    .title {
      position: absolute;
      top: 3.25vw;
      font-size: 13px;
      font-weight: normal;
      color: #606266;
    }
    .big-circle {
      width: 5.5vw;
      height: 5.5vw;
      background: url("../../../../../assets/images/outerRing.png") no-repeat;
      background-size: 100% 100%;
    }
    .middle-circle {
      width: 4.85vw;
      height: 4.85vw;
      animation: haha1 1.8s linear infinite;
      position: absolute;
      top: 0.325vw;
      left: 0.325vw;
      // background: linear-gradient(to bottom, yellow, blue, green, red, white);
      background: url("../../../../../assets/images/optimal.png") no-repeat;
      background-size: 100% 100%;
    }
    .smallCircle {
      width: 3.8vw;
      height: 3.8vw;
      // background: rgba(0, 0, 0, 0.5);
      border-radius: 50%;
      position: absolute;
      top: 0.85vw;
      left: 0.85vw;
    }
    @-webkit-keyframes haha1 {
      0% {
        -webkit-transform: rotate(0deg);
      }
      25% {
        -webkit-transform: rotate(90deg);
      }
      50% {
        -webkit-transform: rotate(180deg);
      }
      75% {
        -webkit-transform: rotate(270deg);
      }
      100% {
        -webkit-transform: rotate(360deg);
      }
    }
  }