主要描述的是如何运用 css 绘制一个抽奖转盘，并运用原生 js 实现转盘抽奖效果。
先来张效果图：
布局
一般来说，转盘一般有四个部分组成：外层闪烁的灯、内层旋转的圆盘、圆盘上的中奖结果、指针。
所以html的结构如下：
<div class="turntable-wrap"> ???<div class="light" id="turntable_light"></div> ???<div class="turntable" id="turntable"> ???????<ul class="bg" id="turntable_bg"></ul> ???????<ul class="gift" id="turntable_gift"></ul> ???</div> ???<div class="pointer disabled" id="turntable_pointer">点击抽奖</div></div>其中灯需要一直闪烁，而抽奖的时候转盘需要转动连带其中的中奖结果，而转盘指针不需要转动是固定的。因此 light 、 turntable 、 pointer放在同一级别。
外层容器利用border-radius:50%实现从正方形变圆形的效果。border: 7px solid #b2a98d加个边框，box-shadow: 0 0 20px #b2a98d
加点阴影，美化一下。
.turntable-wrap { ???position: relative; ???overflow: hidden; ???margin: 50px; ???width: 340px; ???height: 340px; ???border: 7px solid #b2a98d; ???border-radius: 50%; ?????box-shadow: 0 0 20px #b2a98d;}1. 闪烁的灯
- 利用 js 动态的给 light 生成多个小圆点，lightNum = 18，感觉这个数字，转盘每小块显示 3 个灯，感觉效果最好
// 初始化灯let lightFragment = document.createDocumentFragment();for (let i = 0; i < this.lightNum; i++) { ???let lightItem = document.createElement('span'); ???let deg = (360 / this.lightNum) * i ???lightItem.style.transform = `rotate(${deg}deg)`; ???lightFragment.appendChild(lightItem);}this.light.appendChild(lightFragment);- 接下来就是如何让这些小圆点，显示在“正确的位置上”
透露一下，主要利用的是transform:rotate()、transform-origin: center center这两个属性。
给 light 宽、高和外层容器一致，里面添加元素，而元素的宽度给和小圆点一致的宽度，而这些元素旋转一定的角度（(360 / this.lightNum) * i），而它们的旋转中心设置在中心点。达到的效果就是这样的：
接下来就是绘制小圆点了，利用:before属性，将小圆点绘制到顶部。而闪烁的灯，有两种颜色，再利用:nth-type-of(event/odd)实现。最后就是闪烁了，利用的是@keyframes、animation。
最终实现：
@keyframes white-to-yellow { ???0% { ?????background: #fff; ???} ???100% { ?????background: #d7a945; ???}}.turntable-wrap .light { ???position: absolute; ???top: 0; ???left: 0; ???width: 100%; ???height: 100%; ???background: #e0ddd1; ???animation: rotate 5s linear infinite;}.turntable-wrap .light span { ???position: absolute; ???top: 0; ???left: 0; ???right: 0; ???margin: 0 auto; ???width: 10px; ???height: 100%; ???transform-origin: center center;}.turntable-wrap .light span:before { ???content: ''; ???position: absolute; ???top: 5px; ???left: 0; ???right: 0; ???margin: 0 auto; ???width: 10px; ???height: 10px; ???border-radius: 50%;}.turntable-wrap .light span:nth-of-type(even):before { ???background: #fff; ???animation: white-to-yellow 1s linear infinite;}.turntable-wrap .light span:nth-of-type(odd):before { ???background: #d7a945; ???animation: white-to-yellow 1s linear reverse infinite;}转盘的背景
转盘的背景的布局原理和灯的布局原理是一致的。就不重复了。itemNum = 6，表示转盘分6块。
// 初始化转盘背景let bgFragment = document.createDocumentFragment();for (let i = 0; i < this.itemNum; i++) { ???let bgItem = document.createElement('li'); ???let deg = (360 / this.itemNum) * i ???bgItem.style.transform = `rotate(${deg}deg)`; ???bgFragment.appendChild(bgItem);}this.bg.appendChild(bgFragment);主要的 css 如下：
.turntable-wrap .turntable .bg { ???position: absolute; ???top: 0; ???left: 0; ???width: 100%; ???height: 100%; ???background: #fff; ???border: 1px solid #dfd8be; ???border-radius: 50%; ???transform: rotate(90deg);}.turntable-wrap .turntable .bg li { ???position: absolute; ???top: 0; ???left: 0; ???right: 0; ???margin: 0 auto; ???width: 1px; ???height: 100%; ???background: #dfd8be; ???transform-origin: center center;}效果图：
转盘的中奖图
利用的也是transform:rotate()、transform-origin属性，达到旋转布局的。但是又有一点点不一样。
为了让中奖图显示在转盘每个块的正中间
所以每个块是按transorm-origin:right bottom这个方向旋转角度，而外层旋转transform: rotate(45deg)，里面的每个小图旋转transform: rotate(-45deg)再纠正过来。
ps：其实按照灯的transorm-origin:center center应该也能实现，但开始想到的就是这种方案。
js 初始化块的元素代码如下：
// 初始化转盘上的中奖图let giftFragment = document.createDocumentFragment();for (let i = 0; i < this.itemNum; i++) { ???let giftItem = document.createElement('li'); ???giftItem.style.transform = `rotate(${deg}deg)`; ???giftItem.className = this.typeClassMap[this.lottery[i].type]; ???let span = document.createElement('span'); ???span.innerHTML = this.typeMap[this.lottery[i].type]; ???giftItem.appendChild(span); ???giftFragment.appendChild(giftItem)}this.gift.appendChild(giftFragment);其中元素span完全用来显示具体内容的，比如红包。
typeMap: {1: '￥', 2: '谢谢参与'},typeClassMap: {1: '', 2: 'no-gift'},css 布局代码如下：
.turntable-wrap .turntable .gift { ???position: relative; ???width: 100%; ???height: 100%; ???transform: rotate(45deg);}.turntable-wrap .turntable .gift li { ???position: absolute; ???top: 5%; ???left: 5%; ???width: 45%; ???height: 45%; ???transform-origin: right bottom;}.turntable-wrap .turntable .gift li span { ???position: absolute; ???top: 0; ???left: 0; ???right: 0; ???bottom: 0; ???display: block; ???width: 50px; ???height: 70px; ???margin: auto; ???background: yellow; ???transform: rotate(-45deg); ???text-align: center; ???line-height: 80px; ???border-radius: 5px; ???background: #f23c3c; ???color: #fff; ???font-size: 24px;}.turntable-wrap .turntable .gift li:not(.no-gift) span:before { ???content: ''; ???position: absolute; ???top: 15px; ???left: 0; ???width: 50px; ???height: 1px; ???background: #fff;}.turntable-wrap .turntable .gift li.no-gift span { ???background: #fff; ???line-height: 70px; ???color: #bfa74f; ???font-size: 12px;}转盘指针
其实这个还是比较简单的，利用border绘制的三角形。
.turntable-wrap .pointer { ???box-sizing: border-box; ???position: absolute; ???top: 50%; ???left: 0; ???right: 0; ???margin: -23px auto; ???width: 46px; ???height: 46px; ???border-radius: 50%; ???background: #fff; ???border: 5px solid #fff; ???box-shadow: 0 0 0 5px #b9a046; ???text-align: center; ???line-height: 16px; ???color: #b9a046; ???font-size: 14px; ???font-weight: 700; ???cursor: pointer;}.turntable-wrap .pointer:before { ???content: ''; ???position: absolute; ???top: -58px; ???left: 0; ???right: 0; ???margin: 0 auto; ???width: 0; ???border-style: solid; ???border-color: transparent transparent #b9a046 transparent; ???border-width: 25px 10px 25px 10px;}原生 js 实现抽奖效果
主要代码如下：
gameStart () { ?if (this.isGoing) { ???return ?} ?this.isGoing = true; ?// 1. 随机中奖结果 ?// 从1-100之间得到一个随机数，看这个随机数在中奖设置的范围，得到最终中奖的项 ?let randomRate = ~~(Math.random() * 100) // ~~ == Math.floor() ?// 设置中奖数据的概率范围 ?let num = 0 ?this.lottery.forEach(item => { ???item.min = num; ???num += item.rate; ???item.max = num; ?}) ?// 根据随机数，得到中奖结果 ?let res = this.lottery.filter(item => { ???return randomRate >= item.min && randomRate < item.max; ?})[0]; ?// 这儿可以根据实际情况，可重置中奖结果 ???// 2. 计算旋转角度, 需要多转5圈，达转1圈用时1s, 到旋转的效果 ?let rotateItemDeg = (res.location - 1) * (360 / this.lottery.length); // 每个item旋转角度, 第一个不用旋转 ?let rotate = rotateItemDeg + 5 * 360; ?let rotateSpeed = (rotateItemDeg / 360 * 1 + 5).toFixed(2); ?// 重置转盘样式 ?this.turntable.removeAttribute('style'); ?// 保证下一次旋转动画生效 ?setTimeout(() => { ???this.turntable.style.transform = `rotate(${rotate}deg)`; ???this.turntable.style.transition = `transform ${rotateSpeed}s ease-out`; ?}, 10) ?// 3. 动画结束，显示中奖结果，中奖结果如何显示，视实际情况而定 ?setTimeout(() => { ???this.isGoing = false; ???console.log('中奖结果：', randomRate, res, this.typeMap[res.type]); ?}, rotateSpeed * 1000);}由于代码中的注释还是比较全的，就不赘述了。
以下是中奖结果的配置，实际中，可通过接口获取。rate 是中奖比例的控制。
let lottery = [ ???{ ?????location: 1, // 位置 ?????type: 1, // 中奖 ?????rate: 30, // 中奖比例 1-100 ???}, ???{ ??????location: 2, ?????type: 2, // 未中奖 ?????rate: 20 ???}, ???{ location: 3, type: 1, rate: 10 }, ???{ location: 4, type: 2, rate: 20 }, ???{ location: 5, type: 1, rate: 10 }, ???{ location: 6, type: 2, rate: 10 }];最后的最后
- 文字描述的可能不是很清晰，可看github上的源码实现。也用 vue、react实现了一遍效果，其中 vue 版本的是已经运用于实际中的。
- 实现方案可能不是最佳的，有更好方案的可提供建议。^_^
css 如何“画”一个抽奖转盘
原文地址：https://www.cnblogs.com/EnSnail/p/10134399.html