jquery模拟双色球开奖摇号机随机摇号产生数字显示效果代码
代码语言：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 {
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 {
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0