使用纯CSS和JavaScript来实现一个转盘抽奖效果。我们可以设定每个奖项的概率，并使用加权随机算法来决定最终的中奖奖项。
<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>转盘抽奖</title><style>body {display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;background-color: #f7f7f7;}.container {position: relative;width: 300px;height: 300px;}/* 轮盘容器 */.wheel {width: 100%;height: 100%;border-radius: 50%;border: 5px solid #333;position: relative;overflow: hidden;transform: rotate(-36deg);transition: transform 5s ease-out;}/* 使用 clip-path 切分成10个扇形，并设置z-index */.wheel div {position: absolute;width: 100%;height: 100%;clip-path: polygon(50% 50%, 87% -3%, 100% 33%);transform-origin: 50% 50%;z-index: 1;}/* 设置每个扇形区域的颜色和旋转角度 */.wheel div:nth-child(1) {background-color: #f39c12;transform: rotate(0deg);}.wheel div:nth-child(2) {background-color: #e74c3c;transform: rotate(36deg);}.wheel div:nth-child(3) {background-color: #8e44ad;transform: rotate(72deg);}.wheel div:nth-child(4) {background-color: #3498db;transform: rotate(108deg);}.wheel div:nth-child(5) {background-color: #1abc9c;transform: rotate(144deg);}.wheel div:nth-child(6) {background-color: #27ae60;transform: rotate(180deg);}.wheel div:nth-child(7) {background-color: #f1c40f;transform: rotate(216deg);}.wheel div:nth-child(8) {background-color: #2ecc71;transform: rotate(252deg);}.wheel div:nth-child(9) {background-color: #e67e22;transform: rotate(288deg);}.wheel div:nth-child(10) {background-color: #c0392b;transform: rotate(324deg);}/* 奖项名称的显示 */.wheel div span {position: absolute;top: 50%;left: 50%;transform: translate(150%, -380%) rotate(-45deg);font-size: 12px;color: #fff;text-align: center;}/* 指针样式 */.pointer {position: absolute;top: 50%;left: 50%;width: 0;height: 0;border-left: 4px solid transparent;border-right: 4px solid transparent;border-bottom: 130px solid #333;transform: translate(4%, -96%);transform-origin: bottom center; /* 将旋转中心点移到指针底部 */z-index: 10;}button {width: 100px;height: 32px;border-radius: 20px;margin-top: 40px;}</style></head><body><div style="display: flex; flex-direction: column; align-items: center"><div class="container"><div class="wheel" id="wheel"><div><span>一等奖</span></div><div><span>二等奖</span></div><div><span>三等奖</span></div><div><span>四等奖</span></div><div><span>五等奖</span></div><div><span>六等奖</span></div><div><span>七等奖</span></div><div><span>八等奖</span></div><div><span>九等奖</span></div><div><span>十等奖</span></div></div><div class="pointer"></div></div><button onclick="spinPointer()">开始抽奖</button></div><script>let isSpinning = falseconst pointer = document.querySelector('.pointer')// 定义每个奖项及其对应的中奖概率 (权重)const prizes = [{ name: '一等奖', angle: 0, probability: 5 }, // 5% 概率{ name: '二等奖', angle: 36, probability: 10 }, // 10% 概率{ name: '三等奖', angle: 72, probability: 15 }, // 15% 概率{ name: '四等奖', angle: 108, probability: 10 }, // 10% 概率{ name: '五等奖', angle: 144, probability: 5 }, // 5% 概率{ name: '六等奖', angle: 180, probability: 20 }, // 20% 概率{ name: '七等奖', angle: 216, probability: 10 }, // 10% 概率{ name: '八等奖', angle: 252, probability: 10 }, // 10% 概率{ name: '九等奖', angle: 288, probability: 5 }, // 5% 概率{ name: '十等奖', angle: 324, probability: 10 } // 10% 概率]// 计算总概率权重const totalProbability = prizes.reduce((total, prize) => total + prize.probability,0)// 随机抽奖函数，基于权重function getRandomPrize() {const random = Math.random() * totalProbabilitylet sum = 0for (let prize of prizes) {sum += prize.probabilityif (random <= sum) {return prize}}}// 转动指针的函数function spinPointer() {if (isSpinning) return // 如果正在转动，不允许重复点击isSpinning = trueconst selectedPrize = getRandomPrize()const spins = Math.floor(Math.random() * 5) + 5 // 随机转动5到10圈const totalRotation = spins * 360 + selectedPrize.angle // 指针旋转的总角度pointer.style.transition = 'transform 4s ease-out'pointer.style.transform = `translate(4%, -96%) rotate(${totalRotation}deg)`// 等待动画结束后提示中奖奖项setTimeout(() => {alert(`恭喜你获得了: ${selectedPrize.name}`)isSpinning = false // 允许再次点击}, 5000) // 动画时间为5秒}</script></body>
</html>
