纯CSS3大转盘抽奖示例代码(响应式、可配置)


Posted in HTML / CSS onJanuary 13, 2017

纯CSS3大转盘抽奖示例代码(响应式、可配置)

源于前段时候微信小程序最初火爆公测时段,把以前用 Canvas 实现的大转盘抽奖移植成微信小程序,无奈当时小程序对 Canvas 支持不够完善,只好降低用 CSS3 实现。虽然比不上 Canvas 绘图的绚丽,但也总算完成了一个抽奖的 Demo,详见:http://xiazai.3water.com/201701/yuanma/wechat-canvas_3water.rar

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

如果有类似需求并不想麻烦了解细节,可移步这里——Canvas 完整的大转盘抽奖项目(可以直接拿来用)http://xiazai.3water.com/201701/yuanma/canvas_3water.rar

以下就直接贴代码了。

代码

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 = {
        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
    }
}

项目

demo下载地址:demo

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
使用HTML5和CSS3表单验证功能
May 05 HTML / CSS
利用css3径向渐变做一张优惠券的示例
Mar 22 HTML / CSS
HTML5新表单元素_动力节点Java学院整理
Jul 12 HTML / CSS
探究 canvas 绘图中撤销(undo)功能的实现方式详解
May 17 HTML / CSS
HTML中使用SVG与SVG预定义形状元素介绍
Jun 28 HTML / CSS
html5小技巧之通过document.head获取head元素
Jun 04 HTML / CSS
HTML5 Canvas的常用线条属性值总结
Mar 17 HTML / CSS
HTML5新增属性data-*和js/jquery之间的交互及注意事项
Aug 08 HTML / CSS
HTML5触摸事件(touchstart、touchmove和touchend)的实现
May 08 HTML / CSS
HTML5 通过Vedio标签实现视频循环播放的示例代码
Aug 05 HTML / CSS
HTML+CSS制作心跳特效的实现
May 26 HTML / CSS
CSS变量实现主题切换的方法
Jun 23 HTML / CSS
浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
Jan 12 #HTML / CSS
CSS3,线性渐变(linear-gradient)的使用总结
Jan 09 #HTML / CSS
详解CSS3中nth-child与nth-of-type的区别
Jan 05 #HTML / CSS
CSS3打造百度贴吧的3D翻牌效果示例
Jan 04 #HTML / CSS
谈谈对css属性box-sizing的了解
Jan 04 #HTML / CSS
纯CSS3制作的鼠标悬停时边框旋转
Jan 03 #HTML / CSS
HTML5+CSS3网页加载进度条的实现,下载进度条的代码实例
Dec 30 #HTML / CSS
You might like
php+mysql分页代码详解
2008/03/27 PHP
php开启安全模式后禁用的函数集合
2011/06/26 PHP
PHP If Else(elsefi) 语句
2013/04/07 PHP
Laravel重写用户登录简单示例
2016/10/08 PHP
Thinkphp自定义生成缩略图尺寸的方法
2019/08/05 PHP
JavaScript效率调优经验
2009/06/04 Javascript
js 弹出菜单/窗口效果
2011/10/30 Javascript
Eval and new funciton not the same thing
2012/12/27 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
2013/01/23 Javascript
JS打开新窗口的2种方式
2013/04/18 Javascript
ExtJS4中使用mixins实现多继承示例
2013/12/03 Javascript
IE与FireFox的JavaScript兼容问题解决办法
2013/12/31 Javascript
jQuery实现DIV层淡入淡出拖动特效的方法
2015/02/13 Javascript
JS实现异步上传压缩图片
2017/04/22 Javascript
vue实现页面加载动画效果
2017/09/19 Javascript
json对象及数组键值的深度大小写转换问题详解
2018/03/30 Javascript
vue使用Font Awesome的方法步骤
2019/02/26 Javascript
通过JS运行机制的角度说说作用域
2019/03/12 Javascript
Vue+Typescript中在Vue上挂载axios使用时报错问题
2019/08/07 Javascript
layui添加动态菜单与选项卡 AJAX请求的例子
2019/09/25 Javascript
[02:33]DOTA2英雄基础教程 司夜刺客
2013/12/04 DOTA
Python获取远程文件大小的函数代码分享
2014/05/13 Python
python中使用iterrows()对dataframe进行遍历的实例
2018/06/09 Python
详解python异步编程之asyncio(百万并发)
2018/07/07 Python
浅谈python实现Google翻译PDF,解决换行的问题
2018/11/28 Python
windows系统中Python多版本与jupyter notebook使用虚拟环境的过程
2019/05/15 Python
Django中的用户身份验证示例详解
2019/08/07 Python
基于python requests selenium爬取excel vba过程解析
2020/08/12 Python
草莓网英国官网:Strawberrynet UK
2017/02/12 全球购物
美国名表在线商城:Ashford(支持中文)
2019/09/24 全球购物
小学生读书感言
2014/02/12 职场文书
安全隐患整改报告
2014/11/06 职场文书
论文答谢词
2015/01/20 职场文书
求职信格式范文
2015/03/19 职场文书
食品卫生管理制度
2015/08/06 职场文书
Java中使用Filter过滤器的方法
2021/06/28 Java/Android