搜尋

首頁 >web前端 >css教學 >CSS3做出響應式、可設定的抽獎轉盤

CSS3做出響應式、可設定的抽獎轉盤

php中世界最好的语言
php中世界最好的语言原創
2018-03-22 13:30:052976瀏覽

這次帶給大家CSS3做出響應式、可配置的抽獎轉盤，CSS3做出響應式、可配置的抽獎轉盤的注意事項有哪些，下面就是實戰案例，一起來看一下。

源自於前段時候微信小程序最初火爆公測時段，把以前用Canvas 實現的大轉盤抽獎移植成微信小程序，無奈當時小程序對Canvas 支持不夠完善，只好降低用CSS3 實現。雖然比不上Canvas 繪圖的絢麗，但也總算完成了一個抽獎的Demo，詳見：http://xiazai.jb51.net/201701/yuanma/wechat-c​​anvas_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="&#39; + transform + &#39;: rotate(&#39;+ (i * turnNum + turnNum / 2) +&#39;turn)"></li>');
        // 奖项
        itemListHtml.push('<p class="gb-wheel-item">');
        itemListHtml.push('<p class="gb-wheel-icontent" style="&#39; + transform + &#39;: rotate(&#39;+ (i * turnNum) +&#39;turn)">');
        itemListHtml.push('<p class="gb-wheel-iicon">');
        itemListHtml.push('<i class="&#39;+v.name+&#39;"></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
    }
}

相信看了這篇文章案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

linear-gradient的使用詳解

#清除浮動的幾種方法

以上是CSS3做出響應式、可設定的抽獎轉盤的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：CSS3的webkit-tap-highlight-color屬性如何使用下一篇：CSS3的webkit-tap-highlight-color屬性如何使用

相關文章

看更多