标签：scale 此处 transform 抽奖 15deg 移动 rotate mymove

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

    <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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。