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

代码语言:html

所属分类:游戏

代码描述:jquery模拟双色球开奖摇号机随机摇号产生数字显示效果代码

代码标签: 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 {
        animation: dialuodn 1s linear 0.6s backwards;
        -webkit-animation: dialuodn 1s linear 0.6s backwards;
    }
    
        .diaol_8:after {
            animation-delay: 0.5s;
            -webkit-animation-delay: 0.5s;
        }
    
    .diaol_9 {
        animation: dialuodn 1s linear 1.2s backwards;
        -webkit-animation: dialuodn 1s linear 1.2s backwards;
    }
    
        .diaol_9:after {
            animation-delay: 1s;
            -webkit-animation-delay: 1s;
        }
    
    .diaol_10 {
        animation: dialuodn 1s linear 0.2s backwards;
        -webkit-animation: dialuodn 1s linear 0.2s backwards;
    }
    
    .diaol_11 {
        animation: dialuodn 1s linear 1.4s backwards;
        -webkit-animation: dialuodn 1s linear 1.4s backwards;
    }
    
        .diaol_11:after {
            animation-delay: 1.3s;
            -webkit-animation-delay: 1.3s;
        }
    .diaol_12 {animation: dialuodn 1s linear 0.4s backwards;-webkit-animation: dialuodn 1s linear 0.4s backwards;}
    .diaol_12:after {animation-delay: 1s;-webkit-animation-delay: 1s;}
    
    .diaol_13 {animation: dialuodn 1s linear 0.1s backwards;-webkit-animation: dialuodn 1s linear 0.1s backwards;}
    .diaol_13:after {animation-delay: 0.8s;-webkit-animation-delay: 0.8s;}
    
    .diaol_14 {animation: dialuodn 1s linear 0.2s backwards;-webkit-animation: dialuodn 1s linear 0.2s backwards;}
    .diaol_14:after {animation-delay: 0.9s;-webkit-animation-delay: 0.9s;}
    
    .diaol_15 {animation: dialuodn 1s linear 0.3s backwards;-webkit-animation: dialuodn 1s linear 0.3s backwards;}
    .diaol_15:after {animation-delay: 1s;-webkit-animation-delay: 1s;}
    
    .diaol_16 {animation: dialuodn 1s linear 0.3s backwards;-webkit-animation: dialuodn 1s linear 1.3s backwards;}
    .diaol_16:after {animation-delay: 0.7s;-webkit-animation-delay: 0.7s;}
    
    .diaol_17 {animation: dialuodn 1s linear 0.6s backwards;-webkit-animation: dialuodn 1s linear 0.6s backwards;}
    .diaol_17:after {animation-delay: 1.2s;-webkit-animation-delay: 1.2s;}
    
    .diaol_18 {animation: dialuodn 1s linear 1s backwards;-webkit-animation: dialuodn 1s linear 1s backwards;}
    .diaol_18:after {animation-delay: 1s;-webkit-animation-delay: 1s;}
    
    .diaol_19 {animation: dialuodn 1s linear 0.1s backwards;-webkit-animation: dialuodn 1s linear 0.1s backwards;}
    .diaol_19:after {animation-delay: 0.6s;-webkit-animation-delay: 0.6s;}
    
    .diaol_20 {animation: dialuodn 1s linear 0.2s backwards;-webkit-animation: dialuodn 1s linear 0.2s backwards;}
    .diaol_20:after {animation-delay: 0.7s;-webkit-animation-delay: 0.7s;}
    
    .diaol_21 {animation: dialuodn 1s linear 0.3s backwards;-webkit-animation: dialuodn 1s linear 0.3s backwards;}
    .diaol_21:after {animation-delay: 0.8s;-webkit-animation-delay: 0.8s;}
    
    .diaol_22 {animation: dialuodn 1s linear 0.4s backwards;-webkit-animation: dialuodn 1s linear 0.4s backwards;}
    .diaol_22:after {animation-delay: 0.9s;-webkit-animation-delay: 0.9s;}
    
    .diaol_22 {animation: dialuodn 1s linear 0.5s backwards;-webkit-animation: dialuodn 1s linear 0.5s backwards;}
    .diaol_22:after {animation-delay: 1s;-webkit-animation-delay: 1s;}
    
    .diaol_23 {animation: dialuodn 1s linear 0.6s backwards;-webkit-animation: dialuodn 1s linear 0.6s backwards;}
    .diaol_23:after {animation-delay: 1.1s;-webkit-animation-delay: 1.1s;}
    
    .diaol_24 {animation: dialuodn 1s linear 0.7s backwards;-webkit-animation: dialuodn 1s linear 0.7s backwards;}
    .diaol_24:after {animation-delay: 1.2s;-webkit-animation-delay: 1.2s;}
    
    .diaol_25 {animation: dialuodn 1s linear 0.8s backwards;-webkit-animation: dialuodn 1s linear 0.8s backwards;}
    .diaol_25:after {animation-delay: 1.3s;-webkit-animation-delay: 1.3s;}
    
    .diaol_26 {animation: dialuodn 1s linear 0.9s backwards;-webkit-animation: dialuodn 1s linear 0.9s backwards;}
    .diaol_26:after {animation-delay: 1.4s;-webkit-animation-delay: 1.4s;}
    
    .diaol_27 {animation: dialuodn 1s linear 1s backwards;-webkit-animation: dialuodn 1s linear 1s backwards;}
    .diaol_27:after {animation-delay: 1.5s;-webkit-animation-delay: 1.5s;}
    
    .diaol_28 {animation: dialuodn 1s linear 1.1s backwards;-webkit-animation: dialuodn 1s linear 1.1s backwards;}
    .diaol_28:after {animation-delay: 1.6s;-webkit-animation-delay: 1.6s;}
    
    .diaol_29 {animation: dialuodn 1s linear 1.2s backwards;-webkit-animation: dialuodn 1s linear 1.2s backwards;}
    .diaol_29:after {animation-delay: 1.3s;-webkit-animation-delay: 1.3s;}
    
    .diaol_30 {animation: dialuodn 1s linear 1.3s backwards;-webkit-animation: dialuodn 1s linear 1.3s backwards;}
    .diaol_30:after {animation-delay: 1.3s;-webkit-animation-delay: 1.3s;}
    
    .diaol_31 {animation: dialuodn 1s linear 1.4s backwards;-webkit-animation: dialuodn 1s linear 1.4s backwards;}
    .diaol_31:after {animation-delay: 1.3s;-webkit-animation-delay: 1.3s;}
    
    .diaol_32 {animation: dialuodn 1s linear 1.5s backwards;-webkit-animation: dialuodn 1s linear 1.5s backwards;}
    .diaol_32:after {animation-delay: 1.3s;-webkit-animation-delay: 1.3s;}
    
    .diaol_33 {animation: dialuodn 1s linear 1.6s backwards;-webkit-animation: dialuodn 1s linear 1.6s backwards;}
    .diaol_33:after {animation-delay: 1.3s;-webkit-animation-delay: 1.3s;}
    
    
    .niu_danji .zjdl {
        width: 110px;
        height: 90px;
        padding: 32px 0px 0px 20px;
        position: absolute;
        left: 253px;
        top: 715px;
        z-index: 2;
    }
    
    .niu_danji .xianshi {
        width: 110px;
        height: 90px;
        padding: 32px 0px 0px 20px;
        position: absolute;
        left: 253px;
        top: 715px;
        z-index: 2;
        top:-45px;
        display:none;
    }
    .niu_danji .medon {
        width: 136px;
        height: 138px;
        position: absolute;
        left: 248px;
        top: 721px;
        z-index: 1;
    }
    
    
    .niu_danji .dila_Y {
        width: 110px;
        height: 90px;
        animation: cujpin 0.7s ease-out forwards;
        -webkit-animation: cujpin 0.7s ease-out forwards;
    }
    
    .niu_danji .diaL_one {
        /*width: 85px;
        height: 85px;
        position: relative;*/
        display: inline-block;
        margin: 15px 15px;
        padding: 5px;
        width: 50px;
        height: 50px;
        font: bold 25px/50px 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 .diaL_one:after {
            /*content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 85px;
            height: 85px;
            display: block;
            background: url(//repo.bfw.wiki/bfwrepo/images/yaohao/zj_1.png) no-repeat;
            animation: fanda 0.7s ease-out forwards;
            -webkit-animation: fanda 0.7s ease-out forwards;*/
            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 .diaL_two {
        /* width: 85px;
        height: 85px;
        position: relative;*/
        display: inline-block;
        margin: 15px 15px;
        padding: 5px;
        width: 50px;
        height: 50px;
        font: bold 25px/50px 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 .diaL_two:after {
            /* content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 85px;
            height: 85px;
            display: block;
            background: url(//repo.bfw.wiki/bfwrepo/images/yaohao/zj_2.png) no-repeat;
            animation: fanda 0.7s ease-out forwards;
            -webkit-animation: fanda 0.7s ease-out forwards;*/
            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 .diaL_three {
        width: 85px;
        height: 85px;
        position: relative;
    }
    
        .niu_danji .diaL_three:after {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 85px;
            height: 85px;
            display: block;
            background: url(//repo.bfw.wiki/bfwrepo/images/yaohao/zj_3.png) no-repeat;
            animation: fanda 0.7s ease-out forwards;
            -webkit-animation: fanda 0.7s ease-out forwards;
        }
    
    .niu_danji .diaL_four {
        width: 85px;
        height: 85px;
        position: relative;
    }
    
        .niu_danji .diaL_four:after {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 85px;
            height: 85px;
            display: block;
            background: url(//repo.bfw.wiki/bfwrepo/images/yaohao/zj_4.png) no-repeat;
            animation: fanda 0.7s ease-out forwards;
            -webkit-animation: fanda 0.7s ease-out forwards;
        }
    
    
    
    
    @-webkit-keyframes cujpin {
        0% {
            -webkit-transform: translateY(-100px);
        }
    
        100% {
            -webkit-transform: translateY(0);
        }
    }
    
    @keyframes cujpin {
        0% {
            transform: translateY(-100px);
        }
    
        100% {
            transform: translateY(0);
        }
    }
    
    @keyframes fanda {
        0% {
            transform: scale(0.7);
        }
    
        100% {
            transform: scale(1);
        }
    }
    
    @-webkit-keyframes fanda {
        0% {
            -webkit-transform: scale(0.7);
        }
    
        100% {
            -webkit-transform: scale(1);
        }
    }
    
    .tc_anima {
        animation: title1 0.3s linear;
        -webkit-animation: title1 0.3s linear;
    }
    
    @keyframes title1 {
        from {
            opacity: 0;
            transform: scale(0,0);
        }
    
        to {
            opacity: 1;
            transform: scale(1,1);
        }
    }
    
    @-webkit-keyframes title1 {
        from {
            opacity: 0;
            -webkit-transform: scale(0,0)
        }
    
        to {
            opacity: 1;
            -webkit-transform: scale(1,1)
        }
    }
    
    
    
    
    
    .wieyi_1 {
        animation: around1 1.5s linear infinite;
        -webkit-animation: around1 1.5s linear infinite
    }
    
    .wieyi_2 {
        animation: around2 1.5s linear infinite;
        -webkit-animation: around2 1.5s linear infinite;
    }
    
    
    .wieyi_3 {
        animation: around3 1.5s linear infinite;
        -webkit-animation: around3 1.5s linear infinite;
    }
    
    .wieyi_4 {
        animation: around4 1.5s linear infinite;
        -webkit-animation: around4 1.5s linear infinite;
    }
    
    .wieyi_5 {
        animation: around5 1.5s linear infinite;
        -webkit-animation: around5 1.5s linear infinite;
    }
    
    .wieyi_6 {
        animation: around6 1.5s linear infinite;
        -webkit-animation: around6 1.5s linear infinite;
    }
    
    .wieyi_7 {
        animation: around7 1.5s linear infinite;
        -webkit-animation: around7 1.5s linear infinite;
    }
    
    .wieyi_8 {
        animation: around8 1.5s linear infinite;
        -webkit-animation: around8 1.5s linear infinite;
    }
    
    .wieyi_9 {
        animation: around9 1.5s linear infinite;
        -webkit-animation: around9 1.5s linear infinite;
    }
    
    .wieyi_10 {
        animation: around10 1.5s linear infinite;
        -webkit-animation: around10 1.5s linear infinite;
    }
    
    .wieyi_11 {
        animation: around11 1.5s linear infinite;
        -webkit-animation: around11 1.5s linear infinite;
    }
    .wieyi_12 {
        animation: around12 1.5s linear infinite;
        -webkit-animation: around12 1.5s linear infinite;
    }
    .wieyi_13 {
        animation: around13 1.5s linear infinite;
        -webkit-animation: around13 1.5s linear infinite;
    }
    .wieyi_14 {
        animation: around14 1.5s linear infinite;
        -webkit-animation: around14 1.5s linear infinite;
    }
    .wieyi_15 {
        animation: around15 1.5s linear infinite;
        -webkit-animation: around15 1.5s linear infinite;
    }
    .wieyi_16 {
        animation: around16 1.5s linear infinite;
        -webkit-animation: around16 1.5s linear infinite;
    }
    .wieyi_17 {
        animation: around17 1.5s linear infinite;
        -webkit-animation: around17 1.5s linear infinite;
    }
    .wieyi_18 {
        animation: around18 1.5s linear infinite;
        -webkit-animation: around18 1.5s linear infinite;
    }
    .wieyi_19 {
        animation: around19 1.5s linear infinite;
        -webkit-animation: around19 1.5s linear infinite;
    }
    .wieyi_20 {
        animation: around20 1.5s linear infinite;
        -webkit-animation: around20 1.5s linear infinite;
    }
    .wieyi_21 {
        animation: around21 1.5s linear infinite;
        -webkit-animation: around21 1.5s linear infinite;
    }
    .wieyi_22 {
        animation: around22 1.5s linear infinite;
        -webkit-animation: around22 1.5s linear infinite;
    }
    .wieyi_23 {
        animation: around23 1.5s linear infinite;
        -webkit-animation: around23 1.5s linear infinite;
    }
    .wieyi_24 {
        animation: around24 1.5s linear infinite;
        -webkit-animation: around24 1.5s linear infinite;
    }
    .wieyi_25 {
        animation: around25 1.5s linear infinite;
        -webkit-animation: around25 1.5s linear infinite;
    }
    .wieyi_26 {
        animation: around26 1.5s linear infinite;
        -webkit-animation: around26 1.5s linear infinite;
    }
    .wieyi_27 {
        animation: around27 1.5s linear infinite;
        -webkit-animation: around27 1.5s linear infinite;
    }
    .wieyi_28 {
        animation: around28 1.5s linear infinite;
        -webkit-animation: around28 1.5s linear infinite;
    }
    .wieyi_29 {
        animation: around29 1.5s linear infinite;
        -webkit-animation: around29 1.5s linear infinite;
    }
    .wieyi_30 {
        animation: around30 1.5s linear infinite;
        -webkit-animation: around30 1.5s linear infinite;
    }
    .wieyi_31 {
        animation: around31 1.5s linear infinite;
        -webkit-animation: around31 1.5s linear infinite;
    }
    .wieyi_32 {
        animation: around32 1.5s linear infinite;
        -webkit-animation: around32 1.5s linear infinite;
    }
    .wieyi_33 {
        animation: around33 1.5s linear infinite;
        -webkit-animation: around33 1.5s linear infinite;
    }
    
    
    
    .zuadon_dh {
        animation: around 2s linear backwards;
        -webkit-animation: around 2s linear backwards;
    }
    
    
    
    @keyframes dialuodn {
        0% {
            transform: translateY(-200%);
            opacity: 0
        }
    
        5% {
            transform: translateY(-200%);
        }
    
        15% {
            transform: translateY(0);
        }
    
        30% {
            transform: translateY(-100%);
        }
    
        40% {
            transform: translateY(0%);
        }
    
        50% {
            transform: translateY(-60%);
        }
    
        70% {
            transform: translateY(0%);
        }
    
        80% {
            transform: translateY(-30%);
        }
    
        90% {
            transform: translateY(0%);
        }
    
        95% {
            transform: translateY(-14%);
        }
    
        97% {
            transform: translateY(0%);
        }
    
        99% {
            transform: translateY(-6%);
        }
    
        100% {
            transform: translateY(0);
            opacity: 1;
        }
    }
    
    
    @-webkit-keyframes dialuodn {
        0% {
            -webkit-transform: translateY(-200%);
            opacity: 0
        }
    
        5% {
            -webkit-transform: translateY(-200%);
        }
    
        15% {
            -webkit-transform: translateY(0);
        }
    
        30% {
            -webkit-transform: translateY(-100%);
        }
    
        40% {
            -webkit-transform: translateY(0%);
        }
    
        50% {
            -webkit-transform: translateY(-60%);
        }
    
        70% {
            -webkit-transform: translateY(0%);
        }
    
        80% {
            -webkit-transform: translateY(-30%);
        }
    
        90% {
            -webkit-transform: translateY(0%);
        }
    
        95% {
            -webkit-transform: translateY(-14%);
        }
    
        97% {
            -webkit-transform: translateY(0%);
        }
    
        99% {
            -webkit-transform: translateY(-6%);
        }
    
        100% {
            -webkit-transform: translateY(0);
            opacity: 1;
        }
    }
    
    
    @-webkit-keyframes zhuan {
        0% {
            -webkit-transform: rotate(0)
        }
    
        100% {
            -webkit-transform: rotate(360deg)
        }
    }
    
    @keyframes zhuan {
        0% {
            transform: rotate(0)
        }
    
        100% {
            transform: rotate(360deg)
        }
    }
    
    
    
    
    
    @-webkit-keyframes around1 {  
    0%{ -webkit-transform:translate(0px,0px)  }
    20%{-webkit-transform:translate(300px,230px) }
    40%{-webkit-transform:translate(200px,-100px) }
    60%{-webkit-transform:translate(50px,230px) }
    80%{-webkit-transform:translate(300px,-50px) }
    100%{-webkit-transform:translate(200px,240px) }
    }
    @keyframes around1 {  
    0%{ transform:translate(0px,0px)  }
    20%{transform:translate(300px,230px) }
    40%{transform:translate(200px,-100px) }
    60%{transform:translate(50px,230px) }
    80%{transform:translate(300px,-50px) }
    100%{transform:translate(200px,240px) }
    }
    
    @-webkit-keyframes around2 {  
    0%{ -webkit-transform:translate(0px,0px)  }
    10%{-webkit-transform:translate(300px,-120px) }
    30%{-webkit-transform:translate(250px,130px) }
    50%{-webkit-transform:translate(-50px,-120px) }
    80%{-webkit-transform:translate(0px,140px) }
    100%{-webkit-transform:translate(300px,-180px) }
    }
    @keyframes around2 {  
    0%{ transform:translate(0px,0px)  }
    10%{transform:translate(300px,-120px) }
    30%{transform:translate(250px,130px) }
    50%{transform:translate(-50px,-120px) }
    80%{transform:translate(0px,140px) }
    100%{transform:translate(300px,-180px) }
    }
    
    
    @-webkit-keyframes around3 {  
    0%{ -webkit-transform:translate(0px,0px)  }
    25%{-webkit-transform:translate(70px,-290px) }
    50%{-webkit-transform:translate(320px,0px) }
    80%{-webkit-transform:translate(-20px,-290px) }
    100%{-webkit-transform:translate(290px,0px) }
    }
    
    @keyframes around3 {  
    0%{ transform:translate(0px,0px)  }
    25%{transform:translate(70px,-290px) }
    50%{transform:translate(320px,0px) }
    80%{transform:translate(-20px,-290px) }
    100%{transform:translate(290px,0px) }
    
    }
    
    @-webkit-keyframes around4 {  
    0%{ -webkit-transform:translate(0px,0px)  }
    12%{-webkit-transform:translate(50px,250px) }
    30%{-webkit-transform:translate(-150px,-30px) }
    60%{-webkit-transform:translate(-140px,260px) }
    80%{-webkit-transform:translate(-10px,-30px) }
    100%{-webkit-transform:translate(-20px,260px) }
    
    }
    @keyframes around4 {  
    0%{ transform:translate(0px,0px)  }
    12%{transform:translate(50px,250px) }
    30%{transform:translate(-150px,-30px) }
    60%{transform:translate(-140px,260px) }
    80%{transform:translate(-10px,-30px) }
    100%{transform:translate(-20px,260px) }
    
    }
    
    
    @-webkit-keyframes around5 {  
    0%{ -webkit-transform:translate(0px,0px)  }
    22%{-webkit-transform:translate(-50px,-170px) }
    46%{-webkit-transform:translate(150px,145px) }
    80%{-webkit-transform:translate(200px,-115px) }
    100%{-webkit-transform:translate(-100px,145px) }
    }
    
    @keyframes around5 {  
    0%{ transform:translate(0px,0px)  }
    22%{transform:translate(-50px,-170px) }
    46%{transform:translate(150px,145px) }
    80%{transform:translate(200px,-115px) }
    100%{transform:translate(-100px,145px) }
    }
    
    
    
    
    
    @-webkit-keyframes around6 {  
    0%{ -webkit-transform:translate(0px,0px)  }
    15%{ -webkit-transform:translate(260px,40px)  }
    30%{ -webkit-transform:translate(-80px,-260px)  }
    45%{ -webkit-transform:translate(-40px,40px)  }
    60%{ -webkit-transform:translate(100px,-290px)  }
    75%{ -webkit-transform:translate(-80px,-280px)  }
    100%{ -webkit-transform:translate(10px,40px)  }
    }
    
    @keyframes around6 {  
    0%{ transform:translate(0px,0px)  }
    15%{ transform:translate(260px,40px)  }
    30%{ transform:translate(-80px,-260px)  }
    45%{ transform:translate(-40px,40px)  }
    60%{ transform:translate(100px,-290px)  }
    75%{ transform:translate(-80px,-280px)  }
    100%{ transform:translate(10px,40px)  }
    
    }
    
    @-webkit-keyframes around7 {  
    0%{ -webkit-transform:translate(0px,0px)  }
    20%{ -webkit-transform:translate(-60px,-17.........完整代码请登录后点击上方下载按钮下载查看

网友评论0