没用canvas！没用canvas！没用canvas！你没听错，这里只要你css+html学的好，简单的 animation 动画，教你做老虎机！
下面我将分几个步骤，告诉大家如何实现的，想直接看代码的，可以直接看最下面的代码
此篇文章实现的原理和 Vue<幸运抽奖-大转盘> 比较类似，所以像更好的理解老虎机的实现原理，可以去参考下，这里针对细节方面就不做过多的解释了。
实现步骤
1.布局实现
用到了 perspective和 transform-style: preserve-3d;旋转，或许直接看图就能明白个大概了,这样就能很好的实现根据奖品个数旋转成一个圆形，那么外层只需要一个标签包裹，设置一个 overflow: hidden 就🉑️～
:style="`transform: rotateX(${360/list.length*index}deg) translateZ(${13.6*list.length}px)`"
2.动画转动
如：7个奖品，那么每个奖品都会有针对自己的class动画,及.wr1,.wr2,.wr3...，如果抽中的结果奖品是2，那么相当于每个列表的奖品都会去执行 .wr2的动画。
winner: 2, //指定的奖品 null时为不中奖
详细的实现原理可参考文章 Vue<幸运抽奖-大转盘> 实现步骤** 3** 🉐️介绍
这里会遇到一个问题，就是如果在连续抽奖时，下次抽奖开始的时候，还想接着当前的位置继续抽奖，该怎么搞？
这里提供了一个animationClass用来储存每次抽奖后的位置和class，方便下次转动时的动画，根据当前的位置进行转动，以及移除相应class添加新的class动画
animationClass: [] //3个抽奖模块对应的动画属性,方便后来对应添加和移除该class样式
因为重置的位置在 360deg以内 所以不会影响css动画中5 * 360deg的起步值，因此每次还是会继续旋转起来
this.animationClass[index] = {
num: winner,
class: `wr${winner}`,
rotate: (360 / this.list.length) * -winner
}
使用参数：
list: [],//奖品列表，目前最多支持8个，想支持更多，可以手动添加对应的css样式动画
winner: null, //指定的奖品 null时为不中奖
loading: false, //抽奖执行状态，防止用户多次点击
gundongElement: null,//储存获取到的滚动容器的标签
animationClass: [] //3个抽奖模块对应的动画属性,方便后来对应添加和移除该class样式
$time:3s; //老虎机的转动时间 3s 后停止，修改后需要在计时器 setTimeout 中修改对应获奖提示的时间
