温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

如何实现纯CSS3大转盘抽奖

发布时间:2021-07-22 14:34:39 阅读:144 作者:小新 栏目:web开发
前端开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

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

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 = {
        transformnormalizeCss('Transform'),
      }

      return cssSupport.transform;
    }
}());

CSS

html {
    font-size10px
}

.gb-wheel-container ul,
.gb-wheel-container li,
.gb-wheel-container p {
    margin0;
    padding0
}

.gb-wheel-container ul,
.gb-wheel-container li {
    list-style: none
}

.gb-wheel-container {
    margin0 auto;
    position: relative;
    width30rem;
    height30rem;
    border-radius50%;
    box-shadow0 2px 3px #3330 0 2px #000;
    overflow: hidden
}

.gb-wheel-content {
    position: absolute;
    left1rem;
    top1rem;
    z-index2;
    width28rem;
    height28rem;
    box-sizing: border-box;
    border-radius: inherit;
    background-clip: padding-box;
    background-webkit-radial-gradient(rgba(1001001000.115%, transparent 16%0 0,  
                -webkit-radial-gradient(rgba(1001001000.115%, transparent 16%8px 8px,  
  -webkit-radial-gradient(rgba(2552552550.115%, transparent 20%0 1px,
  -webkit-radial-gradient(rgba(2552552550.115%, transparent 20%8px 9px;
    backgroundradial-gradient(rgba(1001001000.115%, transparent 16%0 0,
                radial-gradient(rgba(1001001000.115%, transparent 16%8px 8px, 
  radial-gradient(rgba(2552552550.115%, transparent 20%0 1px, 
  radial-gradient(rgba(2552552550.115%, transparent 20%8px 9px;
    background-color#ffcb3f;
    background-size12px 14px
}

.gb-wheel-content:before {
    content' ';
    position: absolute;
    left: -1rem;
    top: -1rem;
    z-index: -1;
    width28rem;
    height28rem;
    border-radius: inherit;
    border1rem solid #E44025;
    box-shadow0 0 2px 2px rgba(0000.2) inset
}

.gb-wheel-list {
    position: absolute;
    left0;
    top0;
    width: inherit;
    height: inherit;
    z-index9999
}

.gb-wheel-item {
    position: absolute;
    left0;
    top0;
    width100%;
    height100%;
    color#e4370e;
    font-weight: bold;
    text-shadow0 1px 1px rgba(2552552550.6)
}

.gb-wheel-icontent {
    position: relative;
    display: block;
    padding-top1.5rem;
    margin0 auto;
    text-align: center;
    -webkit-transform-origin50% 14rem;
    -ms-transform-origin50% 14rem;
    transform-origin50% 14rem
}

.gb-wheel-itext {
    font-size1.4rem;
    font-weight: lighter
}

.gb-wheel-iicon [class*=icono-] {
    color#e4370e
}

.gb-wheel-line {
    position: absolute;
    left0;
    top0;
    width: inherit;
    height: inherit;
    z-index99
}

.gb-wheel-litem {
    position: absolute;
    left14rem;
    top0;
    width1px;
    height14rem;
    background-colorrgba(22855140.6);
    overflow: hidden;
    -webkit-transform-origin50% 14rem;
    -ms-transform-origin50% 14rem;
    transform-origin50% 14rem
}

.gb-wheel-btn {
    position: absolute;
    left11rem;
    top11rem;
    z-index400;
    width8rem;
    height8rem;
    border-radius50%;
    color#F4E9CC;
    background-color#E44025;
    line-height8rem;
    text-align: center;
    font-size2rem;
    text-shadow0 -1px 1px rgba(0000.6);
    box-shadow0 3px 5px rgba(0000.6), 0 0 5px 4px rgba(0000.2) inset;
    text-decoration: none
}

a.gb-wheel-btn {
    border-bottom: none
}

.gb-wheel-btn::after {
    position: absolute;
    content'';
    left2.5rem;
    top: -1rem;
    width3rem;
    height3rem;
    background-color#E44025;
    -webkit-transformrotate(45deg);
    -ms-transformrotate(45deg);
    transformrotate(45deg);
    box-shadow0 3px 5px rgba(0000.6), 0 0 5px 4px rgba(0000.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-width320px) {
    html {
        font-size10px
    }
}

@media only screen and (min-width375px) {
    html {
        font-size11.71875px
    }
}

@media only screen and (min-width480px) {
    html {
        font-size15px
    }
}

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

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

原文链接:https://www.jb51.net/css/526778.html

AI

开发者交流群×