jquery模拟双色球开奖摇号机随机摇号产生数字显示效果代码-html代码-BFW代码库

代码语言：html
所属分类：游戏
代码描述：jquery模拟双色球开奖摇号机随机摇号产生数字显示效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="apple-touch-fullscreen" content="YES" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta http-equiv="Expires" content="-1" />
    <meta http-equiv="pragram" content="no-cache" />

    <style>
        * {
        padding: 0px;
        margin: 0px;
        font-family: "微软雅黑";
        font-size: 100%;
        font-style: normal
    }
    
    dd, dl, dt, em, i, p, textarea, a, div {
        padding: 0px;
        margin: 0px;
    }
    
    a {
        text-decoration: none;
    }
    
    img {
        border: 0px;
    }
    
    ul, li {
        padding: 0px;
        margin: 0px;
        list-style: none;
    }
    
    .fl {
        float: left
    }
    
    .fr {
        float: right
    }
    
    body {
        margin: 0px;
        padding: 0px;
        color: #ffc476;
        background: #fff;
        color: #000000;
        background: #336666;
    }
    
    a {
        -webkit-tap-highlight-color: rgba(0,0,0,0);
        -webkit-tap-highlight-color: transparent;
    }
    
    .none {
        display: none
    }
    
    
    /*扭蛋机*/
    .niu_danji {
        width: 640px;
        height: 1039px;
        background: #336666;
        margin: 0px auto;
        overflow: hidden;
        position: relative;
        margin-top: 50px;
    }
    
        .niu_danji .game_qu {
            background: url(//repo.bfw.wiki/bfwrepo/images/yaohao/game_ndj.png) no-repeat;
            width: 553px;
            height: 767px;
            left: 47px;
            top: 74px;
            position: absolute;
            z-index: 3
        }
    
        .niu_danji .game_go {
            width: 134px;
            height: 50px;
            position: absolute;
            left: 210px;
            bottom: 225px;
            background: url(//repo.bfw.wiki/bfwrepo/images/yaohao/an_go.png) no-repeat;
            font-size: 18px;
            color: #fff;
            line-height: 20px;
            text-align: center;
            padding-top: 90px;
        }
    
        .niu_danji .wdjifen {
            font-size: 20px;
            color: #fff;
            width: 128px;
            height: 35px;
            line-height: 35px;
            position: absolute;
            left: 206px;
            bottom: 120px;
            text-align: center
        }
    
    
        .niu_danji .an_jfgr {
            width: 100%;
            text-align: center;
            padding-top: 23px;
            position: absolute;
            left: 0px;
            bottom: 60px;
        }
    
            .niu_danji .an_jfgr img {
                margin: 0px 7px;
            }
    
    
    
        .niu_danji .dan_gund {
            width: 500px;
            height: 447px;
            position: absolute;
            left: 68px;
            top: 80px;
            z-index: 1;
            -webkit-border-radius: 240px 240px 0px 0px;
            -moz-border-radius: 240px 240px 0px 0px;
            border-radius: 240px 240px 0px 0px;
            overflow: hidden
        }
    
            .niu_danji .dan_gund span {
                display: inline-block;
                margin: 8px 5px;
                padding: 5px;
                width: 35px;
                height: 35px;
                font: bold 18px/30px arial;
                /*border: 1px #ddd solid;*/
                color: #fff;
                border-radius: 31px;
                text-align: center;
                background-image: -webkit-radial-gradient(circle at top,rgb(247, 247, 247),rgb(222, 222, 222));
                background-image: radial-gradient(circle at top,rgb(248, 197, 197),rgb(255, 0, 0));
            }
                .niu_danji .dan_gund span::after {
                    content: "";
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 115px;
                    height: 115px;
                    display: block;
                    /*background: url(//repo.bfw.wiki/bfwrepo/images/yaohao/canpin_4.png) no-repeat;*/
                    animation: zhuan 1s linear forwards;
                    -webkit-animation: zhuan 1s linear forwards;
                }
    
    
        .niu_danji .dan_gund2 {
            width: 500px;
            height: 447px;
            position: absolute;
            left: 68px;
            top: 80px;
            z-index: 1;
            -webkit-border-radius: 240px 240px 0px 0px;
            -moz-border-radius: 240px 240px 0px 0px;
            border-radius: 240px 240px 0px 0px;
            overflow: hidden
        }
    
            .niu_danji .dan_gund2 span {
                display: inline-block;
                margin: 8px 5px;
                padding: 5px;
                width: 30px;
                height: 30px;
                font: bold 18px/30px arial;
                /*border: 1px #ddd solid;*/
                color: #fff;
                border-radius: 31px;
                text-align: center;
                background-image: -webkit-radial-gradient(circle at top,rgb(247, 247, 247),rgb(222, 222, 222));
                background-image: radial-gradient(circle at top,rgb(192, 203, 255),rgb(0, 5, 255));
            }
    
                .niu_danji .dan_gund2 span::after {
                    content: "";
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 115px;
                    height: 115px;
                    display: block;
                    /*background: url(//repo.bfw.wiki/bfwrepo/images/yaohao/canpin_4.png) no-repeat;*/
                    animation: zhuan 1s linear forwards;
                    -webkit-animation: zhuan 1s linear forwards;
                }
    
    
    /*中奖*/
    .zonj_zezc {
        width: 640px;
        min-height: 1039px;
        position: absolute;
        left: 50%;
        top: 0px;
        z-index: 4;
        background: rgba(0,0,0,0.85);
        margin-left: -320px;
    }
    
        .zonj_zezc .jpzs {
            width: 450px;
            height: 286px;
            position: relative；-webkit-border-radius:10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
            background: #fff;
            margin: 300px auto 0px auto;
            position: relative
        }
    
            .zonj_zezc .jpzs em {
                height: 95px;
                position: absolute;
                right: 0px;
                top: -50px;
            }
    
    
            .zonj_zezc .jpzs h2 {
                font-size: 36px;
                color: #ff1a4b;
                text-align: center;
                line-height40px;
                display: flex;
                justify-content: center;
                align-items: center;
                height: 286px;
            }
    
    
    /*.qiu_1{ position:absolute; left:55px; top:272px;}
    .qiu_1:after{content:""; position:absolute; left:0; top:0; width:115px; height:115px; display:block;background:url(//repo.bfw.wiki/bfwrepo/images/yaohao/canpin_4.png) no-repeat;animation:zhuan 1s linear forwards;-webkit-animation:zhuan 1s linear forwards ;}*/
    
    .qiu_1 {position: absolute;left: 392px;top: 356px;}
    .qiu_2 {position: absolute;left: 413px;top: 391px;}
    .qiu_3 {position: absolute;left: 67px;top: 358px;}
    .qiu_4 {position: absolute;left: 455px;top: 322px;}
    .qiu_5 {position: absolute;left: 348px;top: 348px;}
    .qiu_6 {position: absolute;left: 121px;top: 323px;}
    .qiu_7 {position: absolute;left: 140px;top: 391px;}
    .qiu_8 {position: absolute;left: 348px;top: 348px;}
    .qiu_9 {position: absolute;left: 412px;top: 322px;}
    .qiu_10 {position: absolute;left: 434px;top: 356px;}
    .qiu_11 {position: absolute;left: 372px;top: 391px;}
    .qiu_12 {position: absolute;left: 258px;top: 341px;}
    .qiu_13 {position: absolute;left: 44px;top: 391px;}
    .qiu_14 {position: absolute;left: 348px;top: 348px;}
    .qiu_15 {position: absolute;left: 96px;top: 353px;}
    .qiu_16 {position: absolute;left: 22px;top: 357px;}
    .qiu_17 {position: absolute;left: 348px;top: 348px;}
    .qiu_18 {position: absolute;left: 50px;top: 352px;}
    .qiu_19 {position: absolute;left: 321px;top: 391px;}
    .qiu_20 {position: absolute;left: 115px;top: 359px;}
    .qiu_21 {position: absolute;left: 230px;top: 338px;}
    .qiu_22 {position: absolute;left: 203px;top: 341px;}
    .qiu_23 {position: absolute;left: 295px;top: 360px;}
    .qiu_24 {position: absolute;left: 442px;top: 391px;}
    .qiu_25 {position: absolute;left: 90px;top: 391px;}
    .qiu_26 {position: absolute;left: 347px;top: 360px;}
    .qiu_27 {position: absolute;left: 344px;top: 391px;}
    .qiu_28 {position: absolute;left: 318px;top: 329px;}
    .qiu_29 {position: absolute;left: 0px;top: 331px;}
    .qiu_30 {position: absolute;left: 455px;top: 391px;}
    .qiu_31 {position: absolute;left: 145px;top: 349px;}
    .qiu_32 {position: absolute;left: 167px;top: 360px;}
    .qiu_33 {position: absolute;left: 0px;top: 391px;}
    
    
    /*掉落动画*/
    .diaol_1 {
        animation: dialuodn 1s linear 0.9s backwards;
        -webkit-animation: dialuodn 1s linear 0.9s backwards
    }
    
        .diaol_1:after {
            animation-delay: 0.8s;
            -webkit-animation-delay: 0.8s
        }
    
    .diaol_2 {
        animation: dialuodn 1s linear 0.6s backwards;
        -webkit-animation: dialuodn 1s linear 0.6s backwards
    }
    
        .diaol_2:after {
            animation-delay: 0.5s;
            -webkit-animation-delay: 0.5s
        }
    
    .diaol_3 {
        animation: dialuodn 1s linear backwards;
        -webkit-animation: dialuodn 1s linear backwards
    }
    
    .diaol_4 {
        animation: dialuodn 1s linear 1.3s backwards;
        -webkit-animation: dialuodn 1s linear 1.3s backwards
    }
    
        .diaol_4:after {
            animation-delay: 1s;
            -webkit-animation-delay: 1s
        }
    
    .diaol_5 {
        animation: dialuodn 1s linear 0.8s backwards;
        -webkit-animation: dialuodn 1s linear 0.8s backwards
    }
    
        .diaol_5:after {
            animation-delay: 0.7s;
            -webkit-animation-delay: 0.7s
        }
    
    .diaol_6 {
        animation: dialuodn 1s linear 0.4s backwards;
        -webkit-animation: dialuodn 1s linear 0.4s backwards;
    }
    
        .diaol_6:after {
            animation-delay: 0.3s;
            -webkit-animation-delay: 0.3s
        }
    
    .diaol_7 {
        animation: dialuodn 1s linear 0.9s backwards;
        -webkit-animation: dialuodn 1s linear 0.9s backwards
    }
    
        .diaol_7:after {
            animation-delay: 0.8s;
            -webkit-animation-delay: 0.8s
        }
    
    .diaol_8 {
 .........完整代码请登录后点击上方下载按钮下载查看