实现思路

第一步我们需要html容器,用来放抽奖次数和翻盘的内容.
第二步我们需要将容器的盒子设置为flex布局,三列三行,一般抽奖都是抽奖按钮都是九个吧
第三步我们需要将九个盒子设置为相对定位,因为后面的奖都会覆盖一层牌(相同的),让它翻转之后才会显示奖项.
第四步需要将点击的牌子设置一个翻牌的动画,这里用transform的scaleX来实现.
第五步初始化九个奖项的维护数组,同时生成对应九个的牌子且添加到对应的盒子.
第六步开始着手于抽奖动画,就是要将我们第四步设置的动画class添加到对应的盒子上.同时创建img,将我们的数组数据的src给img,设置高宽度后,加到盒子里面.
第七步查看抽奖次数是否用完,如果用完了就将所有的奖项全部暴露出来,重复第六步.

知识点总结

scale

缩放，指的是“缩小”和“放大”。在css中，我们可以使用scale()方法来将元素根据中心原点进行缩放。

scaleX(x):元素仅水平方向缩放（X轴缩放）;
scaleY(y)：元素仅垂直方向缩放（Y轴缩放）;
scale(x,y)：元素水平方向和垂直方向同时缩放（X轴和Y轴同时缩放）;

关键性代码

// html代码
 <div class="title">可抽奖<label id="count">0</label>次</div>
    <div class="box"></div>
// css代码
 .item {
            position: relative;
            margin: 5px;
            width: 100px;
            height: 100px;
        }
        .hide {
            transform: scaleX(0);
        }
        .show {
            transform: scaleX(1);
        }
 // js代码
 // 抽奖动画
        setTimeout(() => {
            // 从非中奖项中取最后一个，并从数组中移除该项
            const item = isArr.pop()
            const style2 = me.querySelector('.style2')
            const img = document.createElement('img');
            img.src = item.name;
            style2.append(img)
            style2.classList.add('show')
        }, 400)
        count--
        countEL.innerHTML = count

看你能翻到哪个兔子

实现思路

知识点总结

scale

关键性代码