巅云智能建站平台搭建版(创业流派版)火爆上线,毕生受权!新增:文章智能收罗+全站真静态打包+都会分站+智能小法式+不法词过滤+H5自顺应+智能链词等功效功效概况
建站专提News

纯CSS3大转盘抽奖示例代码(呼应式、可设置装备摆设)

一佰互联网站开辟设想(www.taishanly.com) 宣布日期 2020-04-21 17:23:34 阅读数: 182

源于前段时辰微信小法式最后火爆公测时段,把之前用 Canvas 完成的大转盘抽奖移植成微信小法式,无法那时小法式对 Canvas 撑持不够完美,只好下降用 CSS3 完成。固然比不上 Canvas 画图的灿艳,但也总算完成了一个抽奖的 Demo,详见:http://xiazai.jb51.net/201701/yuanma/wechat-canvas_jb51.rar

过后想起,CSS3 完成也并不是无无益处,比方简略、疾速、调试便利、衬着想来也是要比 Canvas 要高效的,更主要的一点是撑持媒体查问,大转盘也能够做成呼应式的。是以抽暇清算,用纯 CSS3 完成一个大转盘抽奖 Demo 并记实上去。

若是有近似需要并不想费事领会细节,可移步这里——Canvas 完全的大转盘抽奖名目(能够间接拿来用)http://xiazai.jb51.net/201701/yuanma/canvas_jb51.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

以上便是本文的全数内容,但愿对大师的进修有所赞助,也但愿大师多多撑持网页设想。

一佰互联是天下着名建站品牌办事商,咱们有九年、网站建造、网页设想、php开辟和域名注册及假造主机办事经历,供给的办事更是天下着名。最近几年来还整合团队上风自立开辟了可视化多用户”“3.0平台版,拖拽排版网站建造设想,轻松完成pc站、手机微网站、小法式、APP一体化全网营销网站扶植 ,已胜利的为天下上百家收集公司供给自助建站平台搭建办事。更多资讯:tags标签

相干消息more

25
04月
PHP完成的办事器分歧性hash散布算法示例

本文实例报告了PHP完成的办事器分歧性hash散布算法。分享给大师供大师参考,详细以下:<?php/** * 对办事器停止分歧... >>概况

18
04月
浅谈Arvixe VPS的付出宝采办及香港数

对Arvixe假造主机咱们应当不是太目生,也是一家老牌主机商,只不过他们家的促销勾当比拟少,其特色便是赠予的域名是永远收费的,条件是主机一... >>概况

06
01月
高端网站设想:注书页面表单设想分享

032018-05 高端网站设想:注书页面表单设想分享 为甚么高端巅云建站明天要写这篇文章呢?仍是因... >>概况

25
05月
【宁波网站建造】公家号疾速涨粉体例汇总 -

有流量的处所就有营销,收集推行营销便是去流量大的处所截流,这是永久稳定的,包含此刻的自媒体也是在经由进程本身构建媒体来截流。有流量的处所就有营销... >>概况

高端网站扶植

美工统筹SEO,为企业电子商务营销助力!

德律风:

023-85725751
建站

产物

域名注册 假造主机 云办事器 企业邮局
智能建站 APP打包 微站/小法式 创业平台
网站推行 媒体营销 智能收罗 AI机械人
400德律风 短信营销 店销机械人
私家定制 流派网站