移动端抽奖功能如何实现

最新推荐文章于 2024-06-23 09:31:26 发布

mySteam`

最新推荐文章于 2024-06-23 09:31:26 发布

阅读量185

点赞数 1

文章标签： css css3 vue

本文链接：https://blog.csdn.net/qq4717529/article/details/121246217

版权

这篇博客详细介绍了如何在前端实现点击抽奖的动画效果，通过使用CSS的`@keyframes`实现旋转缩放动画，并结合JavaScript设置定时器及弹框功能。在用户点击抽奖按钮后，图片元素会进行旋转并缩放的动画，随后显示弹框。代码中包括HTML结构、CSS样式和JavaScript逻辑，适合前端开发者学习参考。

摘要由CSDN通过智能技术生成

看此处

 <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>

## js

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;
    }
  }

## css

.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);
  }
}

# 以上就完成了点击抽奖然后动画做个定时器弄个弹框就行了！