cari

Rumah  >  Artikel  >  hujung hadapan web  >  CSS3大转盘抽奖示例代码（响应式、可配置）

CSS3大转盘抽奖示例代码（响应式、可配置）

高洛峰
高洛峰asal
2017-02-25 14:33:271611semak imbas

这篇文章主要介绍了纯CSS3大转盘抽奖示例代码（响应式、可配置）,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧。

CSS3大转盘抽奖示例代码（响应式、可配置）

源于前段时候微信小程序最初火爆公测时段，把以前用 Canvas 实现的大转盘抽奖移植成微信小程序，无奈当时小程序对 Canvas 支持不够完善，只好降低用 CSS3 实现。虽然比不上 Canvas 绘图的绚丽，但也总算完成了一个抽奖的 

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

如果有类似需求并不想麻烦了解细节，可移步这里——Canvas 完整的大转盘抽奖项目（可以直接拿来用）

以下就直接贴代码了。

代码

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 = [
            {&#39;index&#39;: 0, &#39;text&#39;: &#39;耳机&#39; , &#39;name&#39;: &#39;icono-headphone&#39;},
            {&#39;index&#39;: 1, &#39;text&#39;: &#39;iPhone&#39; , &#39;name&#39;: &#39;icono-iphone&#39;},
            {&#39;index&#39;: 2, &#39;text&#39;: &#39;相机&#39; , &#39;name&#39;: &#39;icono-camera&#39;},
            {&#39;index&#39;: 3, &#39;text&#39;: &#39;咖啡杯&#39; , &#39;name&#39;: &#39;icono-cup&#39;},
            {&#39;index&#39;: 4, &#39;text&#39;: &#39;日历&#39;, &#39;name&#39;: &#39;icono-calendar&#39;},
            {&#39;index&#39;: 5, &#39;text&#39;: &#39;键盘&#39;, &#39;name&#39;: &#39;icono-keyboard&#39;}
        ],
        len = awards.length,
        turnNum = 1 / len;  // 文字旋转 turn 值

    var gbWheel = $(&#39;gbWheel&#39;),
        lineList = gbWheel.querySelector(&#39;ul.gb-wheel-line&#39;),
        itemList = gbWheel.querySelector(&#39;.gb-wheel-list&#39;),
        lineListHtml = [],
        itemListHtml = [];

    var transform = preTransform();

    awards.forEach(function(v, i, a) {
        // 分隔线
        lineListHtml.push(&#39;<li class="gb-wheel-litem" style="&#39; + transform + &#39;: rotate(&#39;+ (i * turnNum + turnNum / 2) +&#39;turn)"></li>&#39;);

        // 奖项
        itemListHtml.push(&#39;<p class="gb-wheel-item">&#39;);
        itemListHtml.push(&#39;<p class="gb-wheel-icontent" style="&#39; + transform + &#39;: rotate(&#39;+ (i * turnNum) +&#39;turn)">&#39;);
        itemListHtml.push(&#39;<p class="gb-wheel-iicon">&#39;);
        itemListHtml.push(&#39;<i class="&#39;+v.name+&#39;"></i>&#39;);
        itemListHtml.push(&#39;</p>&#39;);
        itemListHtml.push(&#39;<p class="gb-wheel-itext">&#39;);
        itemListHtml.push(v.text);
        itemListHtml.push(&#39;</p>&#39;);
        itemListHtml.push(&#39;</p>&#39;);
        itemListHtml.push(&#39;</p>&#39;);
    });           

    lineList.innerHTML = lineListHtml.join(&#39;&#39;);
    itemList.innerHTML = itemListHtml.join(&#39;&#39;);

    function $(id) {
        return document.getElementById(id);
    };

    // 旋转
    var i = 0;
    $(&#39;gbLottery&#39;).onclick = function() {
        i++;
        gbWheel.querySelector(&#39;.gb-wheel-content&#39;).style = transform + &#39;: rotate(&#39;+ i * 3600 +&#39;deg)&#39;;  
    }

    // transform兼容
    function preTransform() {
        var cssPrefix,
        vendors = {
          &#39;&#39;: &#39;&#39;,
          Webkit: &#39;webkit&#39;,
          Moz: &#39;&#39;,
          O: &#39;o&#39;,
          ms: &#39;ms&#39;
        },
        testEle = document.createElement(&#39;p&#39;),
        cssSupport = {};

         // 嗅探特性
        Object.keys(vendors).some(function(vendor) {
            if (testEle.style[vendor + (vendor ? &#39;T&#39; : &#39;t&#39;) + &#39;ransform&#39;] !== undefined) {
              cssPrefix = vendor ? &#39;-&#39; + vendor.toLowerCase() + &#39;-&#39; : &#39;&#39;;
              return true;
            }
        });

      function normalizeCss(name) {
        name = name.toLowerCase();
        return cssPrefix ? cssPrefix + name : name;
      }

      cssSupport = {
        transform: normalizeCss(&#39;Transform&#39;),
      }

      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: &#39; &#39;;
    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: &#39;&#39;;
    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
    }
}

项目

demo下载地址：demo

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持PHP中文网。

更多CSS3大转盘抽奖示例代码（响应式、可配置）相关文章请关注PHP中文网！

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：CSS3实现扇形动画菜单实例Artikel seterusnya：css中Float属性

Artikel berkaitan

Lihat lagi