使用CSS3+jquery.js 实现微信抽奖转盘效果 - html/cs

最近想起了刚接到这个项目时第一时间脑海里迸出的解决方法 “CSS3”!   为什么不能用CSS3来实现呢？ 所以我打算用CSS3来实现这个效果。并不需要依赖jquery的动画效果插件，旋转角度插件。   不废话 贴 源码：   PS：该动画不支持IE10及以下（11没测 应该也不支持，想要全兼容访问jquery版本-详见第一行连接），其他 浏览器测试可用。UC，微信内核测试可用。   （DEMO附件在下方，需wamp环境。）       <!--最基本的结构-->    <div class="demo">         <img id="disk" src="disk.jpg" />         <img src="start.png" id="startbtn" class="start done">  </div>     复制代码 /*负责动画效果的CSS*/ .done{     -webkit-transition: 2s ease;     -moz-transition:2s ease;     -o-transition:2s ease;     transition:2s ease; } 复制代码 复制代码 $(function(){       $("#startbtn").click(function(){          lottery()                     //点击执行函数ajax     });  });  var a = 0;                            //声明一个数值a function lottery(){      $.ajax({          type: 'POST',          url: 'json.php',          dataType: 'json',          cache: false,          error: function(){              alert('出错了！');              return false;          },          success:function(json){                      //角度  b = PHP传来的角度 +720（为了保证动画不会太快停止 先转两圈）+ 声明的数值a             var b = json.angle+720+a;              //奖项              var p = json.prize;             //点击之后才能运行动画，所以必须动态加载style 两个值为了兼容chrome & firefox & safair             document.getElementById('startbtn').setAttribute("style","-webkit-transform: rotate("+b+"deg);transform: rotate("+b+"deg)")             //每次执行完通过a使下次多转3圈             //因为每次执行动画后 CSS3中rotate()的值是保存的，如果不增加一定得角度，则将在PHP返回的角度内转动，即360度以内转动               a += 1080;             //动画效果为2S，动画播放完执行弹窗效果             setTimeout(slideFunction,2000);             function slideFunction(){                 var con = confirm('恭喜你，中得'+p+'\n还要再来一次吗？');                  if(con){                      lottery();                  }else{                      return false;                  }             }         }      }); }