移动端抽奖功能如何实现看此处
<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);
}
}