CSS3做出响应式、可配置的抽奖转盘

2020-11-27 来源：汇智旅游网

这次给大家带来CSS3做出响应式、可配置的抽奖转盘，CSS3做出响应式、可配置的抽奖转盘的注意事项有哪些，下面就是实战案例，一起来看一下。

源于前段时候微信小程序最初火爆公测时段，把以前用 Canvas 实现的大转盘抽奖移植成微信小程序，无奈当时小程序对 Canvas 支持不够完善，只好降低用 CSS3 实现。虽然比不上 Canvas 绘图的绚丽，但也总算完成了一个抽奖的 Demo，详见：http://xiazai.jb51.net/201701/yuanma/wechat-canvas_jb51.rar

事后想起，CSS3 实现也并不是无有益处，比如简单、快捷、调试方便、渲染想来也是要比 Canvas 要高效的，更重要的一点是支持媒体查询，大转盘也可以做成响应式的。因此抽空整理，用纯 CSS3 实现一个大转盘抽奖 Demo 并记录下来。

如果有类似需求并不想麻烦了解细节，可移步这里——Canvas 完整的大转盘抽奖项目（可以直接拿来用）http://xiazai.jb51.net/201701/yuanma/canvas_jb51.rar

以下就直接贴代码了。

代码

HTML

<section class="gb-wheel-container" id="gbWheel">
 <p class="gb-wheel-content gb-wheel-run">
 <ul class="gb-wheel-line"></ul>
 <p class="gb-wheel-list"></p>
 </p>
 <a href="javascript:;" class="gb-wheel-btn" id="gbLottery">抽奖</a> 
</section>

(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('<p class="gb-wheel-item">');
 itemListHtml.push('<p 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('</p>');
 itemListHtml.push('</p>');
 }); 
 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(228, 55, 14, 0.6);
 overflow: hidden;
 -webkit-transform-origin: 50% 14rem;
 -ms-transform-origin: 50% 14rem;
 transform-origin: 50% 14rem
}
.gb-wheel-btn {
 position: absolute;
 left: 11rem;
 top: 11rem;
 z-index: 400;
 width: 8rem;
 height: 8rem;
 border-radius: 50%;
 color: #F4E9CC;
 background-color: #E44025;
 line-height: 8rem;
 text-align: center;
 font-size: 2rem;
 text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
 box-shadow: 0 3px 5px rgba(0, 0, 0, 0.6), 0 0 5px 4px rgba(0, 0, 0, 0.2) inset;
 text-decoration: none
}
a.gb-wheel-btn {
 border-bottom: none
}
.gb-wheel-btn::after {
 position: absolute;
 content: '';
 left: 2.5rem;
 top: -1rem;
 width: 3rem;
 height: 3rem;
 background-color: #E44025;
 -webkit-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 transform: rotate(45deg);
 box-shadow: 0 3px 5px rgba(0, 0, 0, 0.6), 0 0 5px 4px rgba(0, 0, 0, 0.2) inset
}
.gb-wheel-btn.disabled,
.gb-wheel-btn.disabled::after {
 pointer-events: none;
 background: #B07A7B;
 color: #ccc
}
.gb-wheel-run {
 -webkit-transition: transform 6s ease;
 transition: transform 6s ease
}
@media only screen and (min-width: 320px) {
 html {
 font-size: 10px
 }
}
@media only screen and (min-width: 375px) {
 html {
 font-size: 11.71875px
 }
}
@media only screen and (min-width: 480px) {
 html {
 font-size: 15px
 }
}

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

全部栏目

CSS3做出响应式、可配置的抽奖转盘