网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线：028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

查看费用明细

建站知识

当前位置：首页 > 建站知识

如何实现纯CSS3大转盘抽奖

这篇文章给大家分享的是有关如何实现纯CSS3大转盘抽奖的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

成都创新互联公司专注为客户提供全方位的互联网综合服务，包含不限于成都网站设计、成都网站建设、太仓网络推广、成都小程序开发、太仓网络营销、太仓企业策划、太仓品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；成都创新互联公司为所有大学生创业者提供太仓建站搭建服务，24小时服务热线：18980820575，官方网址：www.cdcxhl.com

HTML


    
        
        
    
    抽奖     

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('');

        // 奖项
        itemListHtml.push('');
        itemListHtml.push('');
        itemListHtml.push('');
        itemListHtml.push('');
        itemListHtml.push('
');
        itemListHtml.push('');
        itemListHtml.push(v.text);
        itemListHtml.push('
');
        itemListHtml.push('
');         itemListHtml.push('');     });                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
    }
}

感谢各位的阅读！关于“如何实现纯CSS3大转盘抽奖”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！


分享题目：如何实现纯CSS3大转盘抽奖
文章路径：http://bjjierui.cn/article/jiigge.html

其他资讯

Copyright © 2012-2020 网创优客信息咨询 版权所有 蜀ICP备2023009085号-7
手机:13518219792 QQ:631063699 地址：成都市青羊区锣锅巷31号 邮编:610000 Email:wh@cdxwcx.com
成都网络公司-网创优客建站品牌专注成都网站建设、成都网站设计服务，为成都公司建设高品质的网站