/*盘面主体*/

/*扭蛋机*/
.niu_danji{ width:7.5rem; height:8rem; margin:0 auto;position:relative;left: 0;right:0;}
.niu_danji .img_3{width:100%; position: absolute}
.niu_danji .img_3 img{width:100%;}

/*按钮*/
.niu_danji .img_5{ width:2.5rem; height:2.5rem; margin: 0 auto;}
.niu_danji .img_12{ width: 1.3rem;height: 1.4rem;position: absolute;top: 45%;left: -25%;animation:daxiao1 2s linear  infinite;}
@keyframes daxiao1 {
    0%{width: 1.3rem}
    50%{width: 1.5rem}
    0%{width: 1.3rem}
}

/*掉落口*/
.niu_danji .img_13{ width: 2.5rem;height: 2.5rem;position: absolute;left: 0;top: 6.35rem;z-index: 4;    overflow: hidden;}
.img_13 .diaoqiu {width:1.1rem;position: absolute;left: 0;right: 0;top:1rem;margin: 0 auto;;text-align: center;opacity: 0}
.img_13 .diaoqiu img{width: 100%}
.img_13 .diaoqiu_donghua{animation:diaoqiu 3s ease-out  1;opacity: 1;}
@keyframes diaoqiu {
    0%{width: 0.2rem;opacity: 0;transform: rotate(0deg);}
    20%{width:1.1rem;opacity: 1;transform: rotate(7200deg)}
    100%{transform: rotate(7200deg);opacity: 1;}
}


/*玻璃 +球*/
.niu_danji .dan_gund{ width:5rem; height:3.5rem; position:relative; left:0;right: 0;margin: 0 auto; top:0.3rem;  z-index:1;}
.niu_danji .dan_gund span{ width:1.1rem; height:1.1rem; display:block;position:absolute; }
.niu_danji .dan_gund span img{ width:1.1rem; height:1.1rem;animation:zhuan 1.5s linear forwards;-webkit-animation:zhuan 1.5s linear forwards ;}

.qiu_1{ left:15%; top:70%;}
.qiu_2{ left:35%; top:75%;}
.qiu_3{ left:22%; top:80%;}
.qiu_4{ left:45%; top:57%;}
.qiu_5{ left:28%; top:58%;}
.qiu_6{ left:50%; top:78%;}
.qiu_7{ left:65%; top:80%;}
.qiu_8{ left:38%; top:75%;}
.qiu_9{ left:60%; top:60%;}
.qiu_10{ left:55%; top:72%;}




/*掉落动画*/
.diaol_1{animation:dialuodn 1s linear 0.9s backwards;-webkit-animation:dialuodn 1s linear 0.9s backwards;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;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.1s backwards;-webkit-animation:dialuodn 1s linear 1.1s backwards;animation-delay:1s;-webkit-animation-delay:1s}
.diaol_5{animation:dialuodn 1s linear 0.8s backwards;-webkit-animation:dialuodn 1s linear 0.8s backwards;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;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;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;animation-delay:0.5s;-webkit-animation-delay:0.5s;}
.diaol_9{animation:dialuodn 1s linear 1.1s backwards;-webkit-animation:dialuodn 1s linear 1.1s backwards;animation-delay:1s;-webkit-animation-delay:1s;}
.diaol_10{animation:dialuodn 1s linear 0.2s backwards;-webkit-animation:dialuodn 1s linear 0.2s 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%);}
    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%);}
    97% {transform:translateY(0%);}
    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) }
}




/*抽奖跳动*/
.wieyi_1{animation:around1 1s linear  infinite;-webkit-animation:around1 1s linear  infinite;}
.wieyi_2{animation:around2 1s linear  infinite;-webkit-animation:around2 1s linear  infinite;}
.wieyi_3{animation:around3 1.2s linear  infinite;-webkit-animation:around3 1.2s linear  infinite;}
.wieyi_4{animation:around4 1s linear  infinite;-webkit-animation:around4 1s linear  infinite;}
.wieyi_5{animation:around5 1s linear  infinite;-webkit-animation:around5 1s linear  infinite;}
.wieyi_6{animation:around6 1s linear infinite;-webkit-animation:around6 1s linear infinite;}
.wieyi_7{animation:around7 1s linear  infinite;-webkit-animation:around7 1s linear  infinite;}
.wieyi_8{animation:around8 0.8s linear  infinite;-webkit-animation:around8 0.8s linear  infinite;}
.wieyi_9{animation:around9 0.7s linear infinite;-webkit-animation:around9 0.7s linear infinite;}
.wieyi_10{animation:around10 1s linear  infinite;-webkit-animation:around10 1s linear  infinite;}



@keyframes around1 {
    0%{ left: 15%;top:70%;}
    10%{ left: 5%;top:60%;transform: rotate(360deg)}
    30%{ left: 35%;top:50%;transform: rotate(720deg)}
    60%{left: 75%;top:65%;transform: rotate(1080deg)}
    80%{left: 45%;top:80%;transform: rotate(1440deg)}
    100%{left: 15%;top:70%;transform: rotate(1800deg)}

}

@keyframes around2 {
    0%{ left: 35%;top:75%}
    20%{ left: 70%;top:70%;transform: rotate(-360deg)}
    40%{left: 20%;top:65%;transform: rotate(-720deg)}
    60%{ left: 50%;top:50%;transform: rotate(-1080deg)}
    80%{ left: 70%;top:75%;transform: rotate(-1440deg)}
    100%{left: 35%;top:75%;transform: rotate(-1800deg)}

}

@keyframes around3 {
    0%{ left: 22%;top:80%}
    20%{ left: 70%;top:70%;transform: rotate(360deg)}
    40%{left: 20%;top:65%;transform: rotate(720deg)}
    60%{ left: 50%;top:50%;transform: rotate(1080deg)}
    80%{ left: 70%;top:75%;transform: rotate(1440deg)}
    100%{left: 22%;top:80%;transform: rotate(1800deg)}

}

@keyframes around4 {
    0%{ left: 45%;top:57%}
    20%{ left: 70%;top:70%;transform: rotate(-360deg)}
    50%{left: 20%;top:65%;transform: rotate(-720deg)}
    80%{ left: 70%;top:75%;transform: rotate(-1080deg)}
    100%{left: 45%;top:57%;transform: rotate(-1440deg)}

}

@keyframes around5 {
    0%{ left: 28%;top:58%}
    20%{ left: 20%;top:45%;transform: rotate(360deg)}
    40%{left: 10%;top:71%;transform: rotate(720deg)}
    60%{ left: 40%;top:80%;transform: rotate(1080deg)}
    80%{ left: 48%;top:65%;transform: rotate(1440deg)}
    100%{left: 28%;top:58%;transform: rotate(1800deg)}

}

@keyframes around6 {
    0%{ left: 50%;top:75%}
    25%{ left: 75%;top:55%;transform: rotate(360deg)}
    50%{left: 45%;top:45%;transform: rotate(720deg)}
    75%{ left: 25%;top:65%;transform: rotate(1080deg)}
    100%{left: 50%;top:78%;transform: rotate(1440deg)}

}

@keyframes around7 {
    0%{ left: 65%;top:80%}
    15%{ left: 48%;top:57%;transform: rotate(-360deg)}
    35%{left: 32%;top:80%;transform: rotate(-720deg)}
    50%{ left: 10%;top:56%;transform: rotate(-1080deg)}
    65%{left: 30%;top:79%;transform: rotate(-1440deg)}
    82%{left: 48%;top:57%;transform: rotate(-1800deg)}
    100%{left: 65%;top:80%;transform: rotate(-2160deg)}

}

@keyframes around8 {
    0%{ left: 38%;top:75%}
    20%{ left: 67%;top:80%;transform: rotate(360deg)}
    40%{ left: 76%;top:49%;transform: rotate(720deg)}
    60%{ left: 47%;top:35%;transform: rotate(1080deg)}
    80%{ left: 10%;top:53%;transform: rotate(1440deg)}
    100%{left: 35%;top:75%;transform: rotate(1800deg)}

}

@keyframes around9 {
    0%{ left: 60%;top:60%}
    40%{ left: 25%;top:45%;transform: rotate(-360deg)}
    70%{ left: 36%;top:78%;transform: rotate(-720deg)}
    100%{left: 60%;top:60%;transform: rotate(-1080deg)}

}

@keyframes around10 {
    0%{ left: 55%;top:72%}
    10%{ left: 77%;top:62%;transform: rotate(360deg)}
    35%{ left: 23%;top:45%;transform: rotate(720deg)}
    45%{ left: 6%;top:68%;transform: rotate(1080deg)}
    72%{ left: 67%;top:78%;transform: rotate(1440deg)}
    87%{ left: 14%;top:79%;transform: rotate(1800deg)}
    100%{left: 55%;top:72%;transform: rotate(2160deg)}

}

/*@-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) }*/
/*}*/




/*360旋转动画*/
@keyframes circle {
    0% {
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -o-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}