純CSS3大轉盤抽獎（響應式、可配置）
源於前段時候微信小程序最初火爆公測時段，把之前用 Canvas 實現的大轉盤抽獎移植成微信小程序，無奈當時小程序對 Canvas 支持不夠完善，只好下降用 CSS3 實現。雖然比不上 Canvas 繪圖的絢麗，但也總算完成了一個抽獎的 Demo，詳見：https://github.com/givebest/wechat-turntalbe-canvas。javascript
過後想起，CSS3 實現也並非無有益處，好比簡單、快捷、調試方便、渲染想來也是要比 Canvas 要高效的，更重要的一點是支持媒體查詢，大轉盤也能夠作成響應式的。所以抽空整理，用純 CSS3 實現一個大轉盤抽獎 Demo 並記錄下來。css
若是有相似需求並不想麻煩了解細節，可移步這裏——Canvas 完整的大轉盤抽獎項目（能夠直接拿來用）https://github.com/givebest/GB-canvas-turntable。html
如下就直接貼代碼了,
後面有演示地址。java
代碼
HTML
<section class="gb-wheel-container" id="gbWheel"> <div class="gb-wheel-content gb-wheel-run"> <ul class="gb-wheel-line"></ul> <div class="gb-wheel-list"></div> </div> <a href="javascript:;" class="gb-wheel-btn" id="gbLottery">抽獎</a> </section>
JS
(function() { // 獎品配置 var awards = [ {'index': 0, 'text': '耳機' , 'name': 'icono-headphone'}, {'index': 1, 'text': 'iPhone' , 'name': 'icono-iphone'}, {'index': 2, 'text': '相機' , 'name': 'icono-camera'}, {'index': 3, 'text': '咖啡杯' , 'name': 'icono-cup'}, {'index': 4, 'text': '日曆', 'name': 'icono-calendar'}, {'index': 5, 'text': '鍵盤', 'name': 'icono-keyboard'} ], len = awards.length, turnNum = 1 / len; // 文字旋轉 turn 值 var gbWheel = $('gbWheel'), lineList = gbWheel.querySelector('ul.gb-wheel-line'), itemList = gbWheel.querySelector('.gb-wheel-list'), lineListHtml = [], itemListHtml = []; var transform = preTransform(); awards.forEach(function(v, i, a) { // 分隔線 lineListHtml.push('<li class="gb-wheel-litem" style="' + transform + ': rotate('+ (i * turnNum + turnNum / 2) +'turn)"></li>'); // 獎項 itemListHtml.push('<div class="gb-wheel-item">'); itemListHtml.push('<div class="gb-wheel-icontent" style="' + transform + ': rotate('+ (i * turnNum) +'turn)">'); itemListHtml.push('<p class="gb-wheel-iicon">'); itemListHtml.push('<i class="'+v.name+'"></i>'); itemListHtml.push('</p>'); itemListHtml.push('<p class="gb-wheel-itext">'); itemListHtml.push(v.text); itemListHtml.push('</p>'); itemListHtml.push('</div>'); itemListHtml.push('</div>'); }); lineList.innerHTML = lineListHtml.join(''); itemList.innerHTML = itemListHtml.join(''); function $(id) { return document.getElementById(id); }; // 旋轉 var i = 0; $('gbLottery').onclick = function() { i++; gbWheel.querySelector('.gb-wheel-content').style = transform + ': rotate('+ i * 3600 +'deg)'; } // transform兼容 function preTransform() { var cssPrefix, vendors = { '': '', Webkit: 'webkit', Moz: '', O: 'o', ms: 'ms' }, testEle = document.createElement('p'), cssSupport = {}; // 嗅探特性 Object.keys(vendors).some(function(vendor) { if (testEle.style[vendor + (vendor ? 'T' : 't') + 'ransform'] !== undefined) { cssPrefix = vendor ? '-' + vendor.toLowerCase() + '-' : ''; return true; } }); function normalizeCss(name) { name = name.toLowerCase(); return cssPrefix ? cssPrefix + name : name; } cssSupport = { transform: normalizeCss('Transform'), } return cssSupport.transform; } }());
CSS
html { font-size: 10px } .gb-wheel-container ul, .gb-wheel-container li, .gb-wheel-container p { margin: 0; padding: 0 } .gb-wheel-container ul, .gb-wheel-container li { list-style: none } .gb-wheel-container { margin: 0 auto; position: relative; width: 30rem; height: 30rem; border-radius: 50%; box-shadow: 0 2px 3px #333, 0 0 2px #000; overflow: hidden } .gb-wheel-content { position: absolute; left: 1rem; top: 1rem; z-index: 2; width: 28rem; height: 28rem; box-sizing: border-box; border-radius: inherit; background-clip: padding-box; background: -webkit-radial-gradient(rgba(100, 100, 100, 0.1) 15%, transparent 16%) 0 0, -webkit-radial-gradient(rgba(100, 100, 100, 0.1) 15%, transparent 16%) 8px 8px, -webkit-radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%) 0 1px, -webkit-radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%) 8px 9px; background: radial-gradient(rgba(100, 100, 100, 0.1) 15%, transparent 16%) 0 0, radial-gradient(rgba(100, 100, 100, 0.1) 15%, transparent 16%) 8px 8px, radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%) 0 1px, radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%) 8px 9px; background-color: #ffcb3f; background-size: 12px 14px } .gb-wheel-content:before { content: ' '; position: absolute; left: -1rem; top: -1rem; z-index: -1; width: 28rem; height: 28rem; border-radius: inherit; border: 1rem solid #E44025; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.2) inset } .gb-wheel-list { position: absolute; left: 0; top: 0; width: inherit; height: inherit; z-index: 9999 } .gb-wheel-item { position: absolute; left: 0; top: 0; width: 100%; height: 100%; color: #e4370e; font-weight: bold; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6) } .gb-wheel-icontent { position: relative; display: block; padding-top: 1.5rem; margin: 0 auto; text-align: center; -webkit-transform-origin: 50% 14rem; -ms-transform-origin: 50% 14rem; transform-origin: 50% 14rem } .gb-wheel-itext { font-size: 1.4rem; font-weight: lighter } .gb-wheel-iicon [class*=icono-] { color: #e4370e } .gb-wheel-line { position: absolute; left: 0; top: 0; width: inherit; height: inherit; z-index: 99 } .gb-wheel-litem { position: absolute; left: 14rem; top: 0; width: 1px; height: 14rem; background-color: rgba(