# 转盘抽奖页面 HTML+PHP 实现 以下是一个自适应手机端、具有毛玻璃透明模糊效果的转盘抽奖页面代码： ```php <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>转盘抽奖</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Arial', sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; background: url('https://source.unsplash.com/random/1920x1080') no-repeat center center fixed; background-size: cover; overflow: hidden; } .container { position: relative; width: 90%; max-width: 400px; padding: 20px; } .glass-panel { background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 15px; border: 1px solid rgba(255, 255, 255, 0.3); padding: 20px; box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); text-align: center; color: white; } .wheel-container { position: relative; width: 100%; aspect-ratio: 1/1; margin: 20px auto; } .wheel { width: 100%; height: 100%; border-radius: 50%; position: relative; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.5); transition: transform 4s cubic-bezier(0.17, 0.67, 0.12, 0.99); transform: rotate(0deg); } .wheel-item { position: absolute; width: 50%; height: 50%; transform-origin: bottom right; display: flex; align-items: center; justify-content: center; font-weight: bold; color: white; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); } .wheel-center { position: absolute; width: 30px; height: 30px; background: rgba(0, 0, 0, 0.7); border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; border: 2px solid rgba(255, 255, 255, 0.8); } .spin-btn { background: rgba(255, 255, 255, 0.3); border: 1px solid rgba(255, 255, 255, 0.5); color: white; padding: 10px 25px; border-radius: 30px; font-size: 16px; cursor: pointer; transition: all 0.3s; margin-top: 20px; outline: none; } .spin-btn:hover { background: rgba(255, 255, 255, 0.5); } .result { margin-top: 20px; font-size: 18px; min-height: 27px; } </style> </head> <body> <div class="container"> <div class="glass-panel"> <h1>幸运大转盘</h1> <div class="wheel-container"> <div class="wheel" id="wheel"> <!-- 转盘项目将由PHP动态生成 --> </div> <div class="wheel-center"></div> </div> <button class="spin-btn" id="spinBtn">开始抽奖</button> <div class="result" id="result"></div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const wheel = document.getElementById('wheel'); const spinBtn = document.getElementById('spinBtn'); const result = document.getElementById('result'); let isSpinning = false; // 从PHP获取奖品数据 const prizes = <?php $prizes = [ ['text' => '一等奖', 'color' => '#FF5252'], ['text' => '二等奖', 'color' => '#FF9800'], ['text' => '三等奖', 'color' => '#FFEB3B'], ['text' => '四等奖', 'color' => '#4CAF50'], ['text' => '五等奖', 'color' => '#2196F3'], ['text' => '六等奖', 'color' => '#9C27B0'], ['text' => '谢谢参与', 'color' => '#607D8B'], ['text' => '再来一次', 'color' => '#795548'] ]; echo json_encode($prizes); ?>; // 创建转盘项目 function createWheelItems() { const itemAngle = 360 / prizes.length; let html = ''; prizes.forEach((prize, index) => { const angle = itemAngle * index; const skewAngle = 90 - itemAngle; html += ` <div class="wheel-item" style="transform: rotate(${angle}deg) skewY(${skewAngle}deg); background: ${prize.color}; border-left: 1px solid rgba(255, 255, 255, 0.5); border-right: 1px solid rgba(0, 0, 0, 0.2);"> <div style="transform: skewY(-${skewAngle}deg) rotate(${itemAngle/2}deg); width: 50%; text-align: center;"> ${prize.text} </div> </div> `; }); wheel.innerHTML = html; } // 初始化转盘 createWheelItems(); // 旋转转盘 spinBtn.addEventListener('click', function() { if (isSpinning) return; isSpinning = true; result.textContent = ''; spinBtn.disabled = true; // 随机选择奖品 const randomIndex = Math.floor(Math.random() * prizes.length); const selectedPrize = prizes[randomIndex]; // 计算旋转角度 (5圈 + 随机项目位置) const itemAngle = 360 / prizes.length; const targetAngle = 1800 + (360 - (randomIndex * itemAngle + itemAngle/2)); // 应用旋转 wheel.style.transform = `rotate(${targetAngle}deg)`; // 旋转结束后显示结果 setTimeout(() => { result.textContent = `恭喜获得: ${selectedPrize.text}`; isSpinning = false; spinBtn.disabled = false; }, 4000); }); }); </script> </body> </html> ``` ## 代码说明 1. 毛玻璃效果：使用 `backdrop-filter: blur(10px)` 实现透明模糊效果，兼容性考虑也加了 `-webkit-backdrop-filter`。 2. 自适应设计： - 使用 `viewport` meta 标签确保移动端适配 - 容器宽度设置为 90%，最大宽度 400px - 使用 `aspect-ratio` 保持转盘为正方形 3. 转盘实现： - 使用 PHP 动态生成奖品数据 - 通过 CSS transform 实现扇形区域 - JavaScript 计算旋转角度实现抽奖效果 4. 视觉细节： - 细边框使用 `border: 1px solid rgba(255, 255, 255, 0.5)` - 半透明增强毛玻璃效果 - 转盘中心点设计增强真实感 ## 三条额外需要注意的逻辑点 1. 转盘项目数量改变时，需要同步调整 `itemAngle` 的计算方式，确保每个项目均匀分布。 2. 旋转动画结束后显示的奖品结果基于旋转角度计算，确保角度计算准确才能正确对应奖品。 3. 移动端触摸事件可以考虑添加，使用 `touchstart` 事件替代 `click` 以获得更好的移动端体验。 [2025-06-18 20:40:04 | AI写代码神器 | 1947点数解答]