移动端抽奖功能如何实现看此处

移动端抽奖功能如何实现看此处

    <div class="overflow-y">
      <div class="bg-png">
        <div class="index-top">您还有 <span class="sz">2</span> 次抽奖机会</div>
        <img
          :class="addclass"
          style="width:150px;height:150px;margin-left:115px;margin-top:100px;"
          src="../../assets/img/画板@3X.png"
          id="div1"
        />
        <button @click="go" class="btn">
          抽奖
        </button>
      </div>

export default {
  data() {
    return {
      timer: 300,
      addclass: "ca-content",
      TimeOut: null,
      show: false,
      status: 3
    };
  },
  mounted() {},
  methods: {
    go() {
      this.addclass = "caseopen";
      clearTimeout(this.TimeOut);
      this.TimeOut = setTimeout(() => {
        this.addclass = "ca-content";
        this.show = true;
      }, 1000);
    },
    popup() {
      this.show = false;
    }
  },

以下是动画布局 布局必须要 有动画的

.caseopen {
  animation: mymove 300ms linear 3;
}
@keyframes mymove {
  from {
    transform: rotate(-15deg) scale(1.04);
  }
  to {
    transform: rotate(15deg) scale(0.97);
  }
}
@-webkit-keyframes mymove {
  from {
    transform: rotate(-15deg) scale(1.04);
  }
  to {
    transform: rotate(15deg) scale(0.97);
  }
}
@-moz-keyframes mymove {
  from {
    transform: rotate(-15deg) scale(1.04);
  }
  to {
    transform: rotate(15deg) scale(0.97);
  }
}

标签：scale,此处,transform,抽奖,15deg,移动,rotate,mymove
来源： https://blog.csdn.net/q4717529/article/details/121157004