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 { 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