jquery手机端移动端大转盘抽奖效果代码-html代码-BFW代码库

jquery手机端移动端大转盘抽奖效果代码

代码语言：html

所属分类：大转盘

代码描述：jquery手机端移动端大转盘抽奖效果代码，可单独设置奖项和背景色。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;}
    body{color:#333; font-size:12px;font-family:"Microsoft YaHei"}
    ul,ol{list-style-type:none;}
    select,input,img,select{vertical-align:middle;}
    input{ font-size:12px;}
    a{ text-decoration:none; color:#000;}
    a:hover{color:#c00; text-decoration:none;}
    .clear{clear:both;}
    
    /* 大转盘样式 */
    .banner{display:block;width:95%;margin-left:auto;margin-right:auto;margin-bottom: 20px;}
    .banner .turnplate{display:block;width:100%;position:relative;}
    .banner .turnplate canvas.item{width:100%;}
    .banner .turnplate img.pointer{position:absolute;width: 28.5%;height: 37.5%;left: 35.9%;top: 27%;}
    *{
        margin:0;
        padding:0;
    }
    .roll{
        margin: 35px auto;
        width: 200px;
        height: 40px;
        overflow:hidden;
      
    }
    .roll ul{
        list-style: none;
    }
    .roll li{
        color:#fff;
        line-height:20px;
        font-size:14px;
        text-align:center;
    }
    .turnplate{
        animation-name:myfirst;
        animation-duration:5s;
        animation-timing-function:linear;
        animation-delay:2s;
        animation-iteration-count:infinite;
        animation-direction:alternate;
        animation-play-state:running;
        background-image:url(//repo.bfw.wiki/bfwrepo/images/zhuanpan/turnplate-bg.png);
        background-size:100% 100%;
    }
    .turnplate-bg{
        background-image:url(//repo.bfw.wiki/bfwrepo/images/zhuanpan/turnplate-bg.png);
        background-size:100% 100%;
    
    }
    .turnplate-bg_hover{
        background-image:url(//repo.bfw.wiki/bfwrepo/images/zhuanpan/turnplate-bg_hover.png);
        background-size:100% 100%;
    }
    /*@keyframes myfirst
    {
        0%   {
                backgroundImage:'../../image/kppPlayer/turnplate-bg.png';;
        
        }
        100%   {
                backgroundImage:'../../image/kppPlayer/turnplate-bg_hover.png';
        
        }
    }*/
    .........完整代码请登录后点击上方下载按钮下载查看