这次给大家带来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>
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('<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
}
}
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
linear-gradient的使用详解
清除浮动的几种方法
以上就是css3做出响应式、可配置的抽奖转盘的详细内容。