前端效果，
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1, maximum-scale=1,user-scalable=no" />
<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="blank" />
<title>大转盘</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<style>
@charset "utf-8";
/*reset css*/
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, .footer, .header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video{margin: 0;padding: 0;border: 0;font-size: 100%;font-size: 14px;font: inherit;vertical-align: baseline;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,.footer, .header, hgroup, menu, nav, section {display: block;}
ol, ul {list-style: none;}
blockquote,q {quotes: none;}
a{text-decoration: none;}
blockquote:before, blockquote:after,q:before, q:after {content: ''; content: none;}
table {border-collapse: collapse;border-spacing: 0;}
textarea{resize: none;font-family:arial,"黑体";}
*{outline: none;-webkit-tap-highlight-color:rgba(255,0,0,0);}
a:focus,a:active,a:link,a:visited,a:hover{outline: none;text-decoration: none;-webkit-tap-highlight-color:rgba(255,0,0,0);}
@charset 'utf-8';
body,html{height:100%}
.box{width:5.45rem;height:5.45rem;margin-top:30vh}
.panRotate{animation:panRotate 5s ease-in;
animation-fill-mode:both;
-webkit-animation:panRotate 5s ease-in;
-webkit-animation-fill-mode:both}
@keyframes panRotate{to{transform:rotate(2880deg);-webkit-transform:rotate(2880deg)}}
@-webkit-keyframes panRotate{to{transform:rotate(2880deg);-webkit-transform:rotate(2880deg)}}
.rotate_0{animation:rotate_0 2.05s ease-out;animation-fill-mode:both;-webkit-animation:rotate_0 2.05s ease-out;
-webkit-animation-fill-mode:both}
@keyframes rotate_0{to{transform:rotate(700deg);-webkit-transform:rotate(700deg)}}
@-webkit-keyframes rotate_0{to{transform:rotate(700deg);
-webkit-transform:rotate(700deg)}}
.rotate_10{animation:rotate_10 1s ease-out;animation-fill-mode:both;-webkit-animation:rotate_10 1s ease-out;-webkit-animation-fill-mode:both}
@keyframes rotate_10{to{transform:rotate(380deg);-webkit-transform:rotate(380deg)}}
@-webkit-keyframes rotate_10{to{transform:rotate(380deg);-webkit-transform:rotate(380deg)}}
.rotate_4{animation:rotate_4 1.15s ease-out;animation-fill-mode:both;-webkit-animation:rotate_4 1.15s ease-out;-webkit-animation-fill-mode:both}
@keyframes rotate_4{to{transform:rotate(600deg);-webkit-transform:rotate(600deg)}}
@-webkit-keyframes rotate_4{to{transform:rotate(600deg);-webkit-transform:rotate(600deg)}}
.rotate_3{animation:rotate_3 1.3s ease-out;animation-fill-mode:both;-webkit-animation:rotate_3 1.3s ease-out;-webkit-animation-fill-mode:both}
@keyframes rotate_3{to{transform:rotate(540deg);-webkit-transform:rotate(540deg)}}
@-webkit-keyframes rotate_3{to{transform:rotate(540deg);-webkit-transform:rotate(540deg)}}
.rotate_2{animation:rotate_2 1.45s ease-out;animation-fill-mode:both;-webkit-animation:rotate_2 1.45s ease-out;-webkit-animation-fill-mode:both}
@keyframes rotate_2{to{transform:rotate(480deg);-webkit-transform:rotate(480deg)}}
@-webkit-keyframes rotate_2{to{transform:rotate(480deg);-webkit-transform:rotate(480deg)}}
.rotate_1{animation:rotate_1 1.6s ease-out;animation-fill-mode:both;-webkit-animation:rotate_1 1.6s ease-out;-webkit-animation-fill-mode:both}
@keyframes rotate_1{to{transform:rotate(420deg);-webkit-transform:rotate(420deg)}}
@-webkit-keyframes rotate_1{to{transform:rotate(420deg);-webkit-transform:rotate(420deg)}}
.rotate_5{animation:rotate_5 1.75s ease-out;animation-fill-mode:both;-webkit-animation:rotate_5 1.75s ease-out;-webkit-animation-fill-mode:both}
@keyframes rotate_5{to{transform:rotate(660deg);-webkit-transform:rotate(660deg)}}
@-webkit-keyframes rotate_5{to{transform:rotate(660deg);-webkit-transform:rotate(660deg)}}
.rotate_6{animation:rotate_6 1.9s ease-out;animation-fill-mode:both;-webkit-animation:rotate_6 1.9s ease-out;-webkit-animation-fill-mode:both}
@keyframes rotate_6{to{transform:rotate(720deg);-webkit-transform:rotate(720deg)}}
@-webkit-keyframes rotate_6{to{transform:rotate(720deg);-webkit-transform:rotate(720deg)}}
@-webkit-keyframes bounceIn{20%,40%,60%,80%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);
animation-timing-function:cubic-bezier(.215,.61,.355,1)}
0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}
20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}
40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}
60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}
80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}
@keyframes bounceIn{20%,40%,60%,80%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);
animation-timing-function:cubic-bezier(.215,.61,.355,1)}
0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}
20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}
40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}
60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}
80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}
.bounceIn{animation:bounceIn .75s;-webkit-animation:bounceIn .75s;animation-fill-mode:both;-webkit-animation-fill-mode:both}
html,body{height: 100%;}
.main{background: url(https://image.buslive.cn/zt-zp/images/hm.png) no-repeat;background-size: 100% 12.2rem;width: 6.4rem;}
.banner{background: url(https://image.buslive.cn/zt-zp/images/banner.png) no-repeat;background-size: 6rem 4.82rem;width: 6rem;height: 4.82rem;margin: 0 auto;margin-top: -0.8rem;}
.zp_box{border: 0.03rem solid #fff;width: 5.5rem;height: 5.5rem;border-radius: 50%;margin: 0 auto;position: relative;margin-top: -0.6rem;}
.zp_box .zp_bor{width: 4.5rem;height: 4.5rem;border-radius: 50%;border: 0.5rem solid #7965ff;position: relative;}
.zp_box .zp_bor i{ width: .14rem; height: .14rem; border-radius: 50%; display: block; }
.zp_box .zp_bor .light1{ position: absolute; top: -.33rem; left: 2.18rem; background: #ffe84e; animation:color_nor 1s infinite; -webkit-animation:color_nor 1s infinite;}
.zp_box .zp_bor .light2{ position: absolute; top: -.23rem; left: 2.84rem; background: #ff9994; animation:color_oth 1s infinite; -webkit-animation:color_oth 1s infinite;}
.zp_box .zp_bor .light3{ position: absolute; top: .02rem; left: 3.44rem; background: #ffe84e; animation:color_nor 1s infinite; -webkit-animation:color_nor 1s infinite;}
.zp_box .zp_bor .light4{ position: absolute; top: .4rem; left: 4rem; background: #ff9994; animation:color_oth 1s infinite; -webkit-animation:color_oth 1s infinite;}
.zp_box .zp_bor .light5{ position: absolute; top: 0.9rem; left: 4.35rem; background: #ffe84e; animation:color_nor 1s infinite; -webkit-animation:color_nor 1s infinite;}
.zp_box .zp_bor .light6{ position: absolute; top: 1.5rem; left: 4.6rem; background: #ff9994; animation:color_oth 1s infinite; -webkit-animation:color_oth 1s infinite;}
.zp_box .zp_bor .light7{ position: absolute; top: 2.18rem; right: -.33rem; background: #ffe84e; animation:color_nor 1s infinite; -webkit-animation:color_nor 1s infinite;}
.zp_box .zp_bor .light8{ position: absolute; bottom:1.5rem;left: 4.6rem; background: #ff9994; animation:color_oth 1s infinite; -webkit-animation:color_oth 1s infinite;}
.zp_box .zp_bor .light9{ position: absolute; bottom: 0.9rem; left: 4.35rem; background: #ffe84e; animation:color_nor 1s infinite; -webkit-animation:color_nor 1s infinite;}
.zp_box .zp_bor .light10{ position: absolute; bottom: .4rem; left:4rem; background: #ff9994; animation:color_oth 1s infinite; -webkit-animation:color_oth 1s infinite;}
.zp_box .zp_bor .light11{ position: absolute; bottom: .02rem; left: 3.44rem; background: #ffe84e; animation:color_nor 1s infinite; -webkit-animation:color_nor 1s infinite;}
.zp_box .zp_bor .light12{ position: absolute; bottom: -.23rem; left: 2.84rem; background: #ff9994; animation:color_oth 1s infinite; -webkit-animation:color_oth 1s infinite;}
.zp_box .zp_bor .light13{ position: absolute; bottom: -.33rem; left: 2.18rem; background: #ffe84e; animation:color_nor 1s infinite; -webkit-animation:color_nor 1s infinite;}
.zp_box .zp_bor .light14{ position: absolute; bottom: -.23rem; right: 2.84rem; background: #ff9994; animation:color_nor 1s infinite; -webkit-animation:color_nor 1s infinite;}
.zp_box .zp_bor .light15{ position: absolute; bottom: .02rem; right: 3.44rem; background: #ffe84e; animation:color_oth 1s infinite; -webkit-animation:color_oth 1s infinite;}
.zp_box .zp_bor .light16{ position: absolute; bottom: .4rem; right: 4rem; background: #ff9994; animation:color_nor 1s infinite; -webkit-animation:color_nor 1s infinite;}
.zp_box .zp_bor .light17{ position: absolute; bottom: 0.9rem; right: 4.35rem; background: #ffe84e; animation:color_oth 1s infinite; -webkit-animation:color_oth 1s infinite;}
.zp_box .zp_bor .light18{ position: absolute; bottom: 1.5rem; right: 4.6rem; background: #ff9994; animation:color_nor 1s infinite; -webkit-animation:color_nor 1s infinite;}
.zp_box .zp_bor .light19{ position: absolute; bottom: 2.18rem; left: -.33rem; background: #ffe84e; animation:color_oth 1s infinite; -webkit-animation:color_oth 1s infinite;}
.zp_box .zp_bor .light20{ position: absolute; top: 1.5rem; right: 4.6rem; background: #ff9994; animation:color_oth 1s infinite; -webkit-animation:color_oth 1s infinite;}
.zp_box .zp_bor .light21{ position: absolute; top: .9rem; right: 4.35rem; background: #ffe84e; animation:color_nor 1s infinite; -webkit-animation:color_nor 1s infinite;}
.zp_box .zp_bor .light22{ position: absolute; top: .4rem; right: 3.95rem; background: #ff9994; animation:color_oth 1s infinite; -webkit-animation:color_oth 1s infinite;}
.zp_box .zp_bor .light23{ position: absolute; top: .02rem; right: 3.44rem; background: #ffe84e; animation:color_nor 1s infinite; -webkit-animation:color_nor 1s infinite;}
.zp_box .zp_bor .light24{ position: absolute; top: -.23rem; right: 2.84rem; background: #ff9994; animation:color_oth 1s infinite; -webkit-animation:color_oth 1s infinite;}
@keyframes color_nor
{
from {background: #ffe84e;}
to {background: #ff9994;}
}
@-webkit-keyframes color_nor
{
from {background: #ffe84e;}
to {background: #ff9994;}
}
@keyframes color_oth
{
from {background: #ff9994;}
to {background: #ffe84e;}
}
@-webkit-keyframes color_oth
{
from {background: #ff9994;}
to {background: #ffe84e;}
}
.zp_pb{background: url(https://image.buslive.cn/zt-zp/images/zp_mb.png) no-repeat;background-size: 4.5rem 4.5rem;width: 4.5rem;height: 4.5rem;position: relative;border-radius: 50%;overflow: hidden;
transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-moz-transform:rotate(30deg); /* Firefox */
-webkit-transform:rotate(30deg); /* Safari 和 Chrome */
-o-transform:rotate(30deg); /* Opera */
}
.zp_go{background: url(https://image.buslive.cn/zt-zp/images/zp_zz.png) no-repeat;background-size: 1.5rem 2rem;width: 1.5rem;height: 2rem;position: absolute;z-index: 1;top: 1rem;left: 1.5rem;}
.zp_shadow{background: url(https://image.buslive.cn/zt-zp/images/zp_bs.png) no-repeat;background-size: 4.9rem .73rem;width: 4.9rem;height: .73rem;margin: 0 auto;margin-top: -0.3rem;}
.nav_btn{height: 0.75rem;margin: 0.4rem;padding-bottom: 0.3rem;position: relative;overflow: hidden;margin-top: 0.9rem;margin-bottom: 0;}
.go_back{background: url(https://image.buslive.cn/zt-zp/images/nav-btn.png) no-repeat;background-size: 2.72rem .75rem;width: 2.72rem;height: .75rem;line-height: .7rem;font-size: .26rem;text-align: center;color: #fff;float: left;}
.my_prize{background: url(https://image.buslive.cn/zt-zp/images/nav-btn.png) no-repeat;background-size: 2.72rem .75rem;width: 2.72rem;height: .75rem;line-height: .7rem;font-size: .26rem;text-align: center;color: #fff;float: right;}
.zj_pop{position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,.8); z-index: 99;/*display: none;*/}
.zj_pop .pop_main{position: absolute;top: 2rem;left: 0.4rem;right: 0.4rem;padding: 0.3rem 0.2rem;border-radius: 0.2rem;background-color: #fff6d6;background: url(https://image.buslive.cn/dfw_zt/images/newImages_0112/ico35_0418.png) no-repeat;background-size: 100% 100%;height:2rem;padding-top: 2rem;}
.zj_pop .pop_main .abp_txt{font-size: .4rem;color: red;text-align: center;margin: 0.1rem 0.4rem;line-height: .8rem;}
.abp_close{display: block;margin: 0.3rem auto;width: 1.5rem;height: 0.6rem;line-height: 0.6rem;border-radius: 0.1rem;color: #fff;text-align: center;font-size: 0.24rem;position: absolute;bottom: -1.5rem;right: 1.8rem;background-color: red;color: #fff;}
.np_pop{position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,.8); z-index: 99;/*display: none;*/}
.np_pop .pop_main{position: absolute;top: 2rem;left: 0.6rem;right: 0.6rem;padding: 0.3rem 0.2rem;border-radius: 0.2rem;background-color: #fff6d6;}
.np_pop .pop_main .abp_txt{font-size: 0.24rem;color: #000;text-align: center;margin: 0.1rem 0.4rem;line-height: 0.5rem;}
.np_close{display: block;margin: 0.3rem auto;width: 1.5rem;height: 0.6rem;line-height: 0.6rem;border-radius: 0.1rem;color: #833700;background-color: #ffcc32;text-align: center;font-size: 0.24rem;}
.buller{ position: fixed; top: 3rem; z-index: 100; display: none; left: -6.4rem; box-sizing: border-box; color: #fff; font-size: .24rem; border-radius: .5rem; line-height: .68rem; height: .68rem; background-repeat: no-repeat; white-space: nowrap; animation: move 1 4.5s linear; -webkit-animation: move 1 4.5s linear; }
.buller.bullerbg1{ padding-left: .8rem; padding-right: .15rem; background-color: rgba(89,101,105,.8); background-image: url(//image.buslive.cn/dfw_zt/images/bulletico.png); background-position: .1rem center; background-size: .64rem .52rem; }
.buller.bullerbg2{ background-image: url(//image.buslive.cn/dfw_zt/images/newImages_0112/bubble_0615.png); background-position: 0 0; background-size: 100% 100%; width: 5.7rem;padding-left: .9rem;}
@keyframes move{
0%{ left: 6.4rem };
100%{ left: -6.4rem; }
}
@-webkit-keyframes move{
0%{ left: 6.4rem };
100%{ left: -6.4rem; }
}
</style>
<script>
new function () {
var _self = this;
_self.width = 640;
_self.fontSize = 100;
_self.widthProportion = function () {
var _dom = (document.body && document.body.clientWidth || document.getElementsByTagName("html")[0].offsetWidth) / _self.width;
return _dom;
};
_self.changePage = function () {
document.getElementsByTagName("html")[0].setAttribute("style", "font-size:" + _self.widthProportion() * _self.fontSize + "px");
}
_self.changePage();
window.addEventListener('resize', function () {
_self.changePage();
}, false);
};
</script>
<body>
<div class="main">
<div class="banner"></div>
<div class="zp_box">
<div class="zp_bor">
<i class="light1"></i>
<i class="light2"></i>
<i class="light3"></i>
<i class="light4"></i>
<i class="light5"></i>
<i class="light6"></i>
<i class="light7"></i>
<i class="light8"></i>
<i class="light9"></i>
<i class="light10"></i>
<i class="light11"></i>
<i class="light12"></i>
<i class="light13"></i>
<i class="light14"></i>
<i class="light15"></i>
<i class="light16"></i>
<i class="light17"></i>
<i class="light18"></i>
<i class="light19"></i>
<i class="light20"></i>
<i class="light21"></i>
<i class="light22"></i>
<i class="light23"></i>
<i class="light24"></i>
<div class="zp_pb pan"></div>
<a href="javascript:;" class="zp_go"></a>
</div>
</div>
<div class="zp_shadow"></div>
<div class="nav_btn">
<a href="./?a=index" class="go_back" style="display:block;float:left;">返回游戏</a>
<a href="./?a=prize_my" class="my_prize">查看我的奖品</a>
</div>
</div>
<!-- <div class="prize_pop"><div class="pop_main"><div class="abp_txt">中奖啦</div><a href="javascript:;" class="abp_close">确定</a></div></div> -->
</body>
</html>
<script>
var angleValue = 22.5;
var mn = Math.floor(Math.random() * 1000);
var gameOn = false;
var _prize;
var mygold = 10000;
$('.zp_go').click(function(){
var glarr = [0,1,2,5,50,100,0,1,2,0];
var gl = Math.floor(Math.random() *10 );
console.log(glarr[gl]);
_prize = glarr[gl];
goRotate(glarr[gl]);
})
// 旋转函数
function goRotate(data){
if (data == 1) {
rotateDeg='rotate_1';
}else if(data == 100){
rotateDeg='rotate_2';
}else if(data ==50){
rotateDeg='rotate_4';
}else if(data == 5){
rotateDeg='rotate_5';
}else if(data == 2){
rotateDeg='rotate_6';
}else if(data == 0){
rotateDeg='rotate_3';
}
if(mygold>0){
mygold--;
$('.pan').addClass('panRotate');
setTimeout(function() {
$('.pan').removeClass('panRotate');
$('.pan').addClass(rotateDeg);
setTimeout(function() {
if (data == 0) {
var str = '<div class="np_pop"><div class="pop_main"><div class="abp_txt">很遗憾，您没有中奖</div><a href="javascript:;" class="np_close">确定</a></div></div>';
setTimeout(function(){$(str).appendTo("body");}, 200);
}else{
var str = '<div class="prize_pop zj_pop"><div class="pop_main"><div class="abp_txt" style="font-size:.46rem">'+_prize+'元</div><a href="javascript:;" class="abp_close">确定</a></div></div>';
setTimeout(function(){$(str).appendTo("body");}, 200);
}
// gameOn = false;
}, 3000);
}, 5000);
}else if(mygold==0){
nogold();
// gameOn = false;
}
}
$(document).on("click",".abp_close,.np_close",function(){
$(".prize_pop").remove();
$(".np_pop").fadeOut(200);
$('.pan').removeClass(rotateDeg);
})
function nogold(){
var str = '<div class="np_pop"><div class="pop_main"><div class="abp_txt">摇奖机会已用光，请通关后再来</div><a href="javascript:;" class="np_close">确定</a></div></div>';
$(str).appendTo("body");
}
</script>