效果
web前端入門到實戰：css3 實現大轉盤
完整程式碼
<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <meta name="keywords" content="關鍵字" />     <meta name="description" content="描述" />     <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,email=no">     <meta name="wap-font-scale" content="no">     <meta name="apple-mobile-web-app-status-bar-style" content="black" />       <title>大轉盤</title>     <link rel="stylesheet" href="css/common.css">     <style>     /* 大轉盤 */     .turntable-wrap{position: relative;background: url(../images/bg-turntable.jpg) no-repeat center top #030406;background-size: 100% auto;}     .turntable-wrap .turntable-times{position: absolute;z-index: 3;left: 1rem;right: 1rem;top: 75%;font-size: 3rem;color: #fff;text-align: center;}     .turntable-wrap .turntable-times strong{color: #f00;}     .turntable-wrap .turntable-logo{position: absolute;z-index: 2;left: 50%;bottom: 2rem;width: 40%;-webkit-transform: translate(-50%, 0);-ms-transform: translate(-50%, 0);transform: translate(-50%, 0);}     .turntable-wrap .turntable-main{position: absolute;z-index: 4;left: 0;top: 14%;width: 100%;}     .turntable-wrap .turntable-main [class^="awards-"]{position: absolute;left: 50%;top: 0;z-index: 2;width: 12.5%;height: 50%;font-size: 1.8rem;font-weight: bold;color: #444;text-align: center;-webkit-transform: translate(-50%, 0) rotate(0);-ms-transform: translate(-50%, 0) rotate(0);transform: translate(-50%, 0) rotate(0);-webkit-transform-origin: center bottom;-ms-transform-origin: center bottom;transform-origin: center bottom;}     .turntable-wrap .turntable-main [class^="awards-"]:before{content: "";display: block;height: 25%;}     .turntable-wrap .turntable-main .awards-1{-webkit-transform: translate(-50%, 0) rotate(22.5deg);-ms-transform: translate(-50%, 0) rotate(22.5deg);transform: translate(-50%, 0) rotate(22.5deg);color: #f00;}     .turntable-wrap .turntable-main .awards-2{-webkit-transform: translate(-50%, 0) rotate(67.5deg);-ms-transform: translate(-50%, 0) rotate(67.5deg);transform: translate(-50%, 0) rotate(67.5deg);}     .turntable-wrap .turntable-main .awards-3{-webkit-transform: translate(-50%, 0) rotate(112.5deg);-ms-transform: translate(-50%, 0) rotate(112.5deg);transform: translate(-50%, 0) rotate(112.5deg);color: #f00;}     .turntable-wrap .turntable-main .awards-4{-webkit-transform: translate(-50%, 0) rotate(157.5deg);-ms-transform: translate(-50%, 0) rotate(157.5deg);transform: translate(-50%, 0) rotate(157.5deg);}     .turntable-wrap .turntable-main .awards-5{-webkit-transform: translate(-50%, 0) rotate(202.5deg);-ms-transform: translate(-50%, 0) rotate(202.5deg);transform: translate(-50%, 0) rotate(202.5deg);color: #f00;}     .turntable-wrap .turntable-main .awards-6{-webkit-transform: translate(-50%, 0) rotate(247.5deg);-ms-transform: translate(-50%, 0) rotate(247.5deg);transform: translate(-50%, 0) rotate(247.5deg);}     .turntable-wrap .turntable-main .awards-7{-webkit-transform: translate(-50%, 0) rotate(292.5deg);-ms-transform: translate(-50%, 0) rotate(292.5deg);transform: translate(-50%, 0) rotate(292.5deg);color: #f00;}     .turntable-wrap .turntable-main .awards-8{-webkit-transform: translate(-50%, 0) rotate(337.5deg);-ms-transform: translate(-50%, 0) rotate(337.5deg);transform: translate(-50%, 0) rotate(337.5deg);}     .turntable-wrap .turntable-main .turntable-rotate{position: relative;-webkit-transition: all 1s ease-out;-ms-transition: all 1s ease-out;transition: all 1s ease-out;}     .turntable-wrap .turntable-main .turntable-img{display: block;width: 90%;margin: 0 auto;}     .turntable-wrap .turntable-main .turntable-pointer{position: absolute;z-index: 3;left: 50%;top: 50%;width: 25%;-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}     .turntable-wrap .turntable-main .turntable-pointer .go{display: block;position: relative;z-index: 2;width: 100%;}     .turntable-wrap .turntable-main .turntable-pointer .pointer{position: absolute;z-index: 1;left: 50%;top: -12%;-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);width: 20%;}     .turntable-wrap .dialog{visibility: hidden;opacity: 0;position: absolute;z-index: 9;left: 0;top: 0;width: 100%;height: 100%;background-color: rgba(0,0,0,0.5);-webkit-transition: all .3s ease-out;transition: all .3s ease-out;}     .turntable-wrap .dialog.active{visibility: visible;opacity: 1;}     .turntable-wrap .dialog-main{position: absolute;z-index: 2;left: 5%;right: 5%;top: 50%;-webkit-transform: translate(0, -50%);-ms-transform: translate(0, -50%);transform: translate(0, -50%);}     .turntable-wrap .dialog-main .dialog-bg{display: block;width: 100%;}     .turntable-wrap .dialog-main .dialog-close{position: absolute;z-index: 2;right: 0;top: -0.5rem;width: 15%;}     .turntable-wrap .dialog-main p{position: absolute;z-index: 3;left: 10%;top: 50%;width: 80%;font-size: 1.8rem;color: #fff;text-align: center;-webkit-transform: translate(0, -50%);-ms-transform: translate(0, -50%);transform: translate(0, -50%);}     </style>     <script src="js/jquery.min.js"></script> </head> <body>     <div>         <div>             <div>                 <img src="images/img-turntable-pointer.png" alt="">                 <img src="images/img-turntable-go.png" alt="">             </div>             <div>                 <img src="images/img-turntable.png" alt="">                 <strong>20元</strong>                 <strong>2元</strong>                 <strong>200元</strong>                 <strong>4元</strong>                 <strong>100元</strong>                 <strong>6元</strong>                 <strong>50元</strong>                 <strong>8元</strong>             </div>         </div>         <div>您有<strong></strong>次抽狀機會</div>         <img src="images/img-turntable-logo.png" alt="">         <div>             <div>                 <p>恭喜您獲得 <em></em> 元<br>將在公眾號發放微信紅包</p>                 <img src="images/img-turntable-dialog-close.png" alt="">                 <img src="images/img-turntable-dialog.png" alt="">             </div>         </div>     </div>     <script>         // 實始化高度         $('.turntable-wrap').css('min-height', $(window).height());         // 對應獎項         function awards(rotate) {             switch(rotate) {                 case 337.5:                     return '20';                     break;                 case 292.5:                     return '2';                     break;                 case 247.5:                     return '200';                     break;                 case 202.5:                     return '4';                     break;                 case 157.5:                     return '100';                     break;                 case 112.5:                     return '6';                     break;                 case 67.5:                     return '50';                     break;                 case 22.5:                     return '8';                     break;             }         }         // 中狀機率(如果想改機率可以*200然後計算)         function probability() {             var random = Math.random()*100;             if(random==1) {  // 200元(1%)                 return 247.5;             } else if(1<random && random<=3) { // 100元(2%)                 return 157.5;             } else if(3<random && random<=6) { // 50元(3%)                 return 67.5;             } else if(6<random && random<=10) { // 20元(4%)                 return 337.5;             } else if(10<random && random<=15) { // 8元(5%)                 return 22.5;             } else if(15<random && random<=22) { // 6元(7%)                 return 112.5;             } else if(22<random && random<=32) { // 4元(10%)                 return 202.5;             } else {                             // 2元(68%)                 return 292.5;             }         }         // 轉盤邏輯         var originRotate = 0;         function handleTurntable() {             var rotate = originRotate+(360-originRotate%360)+360+probability();             $('.turntable-rotate').css({                 '-webkit-transform': 'rotate('+rotate+'deg)',                 '-ms-transform': 'rotate('+rotate+'deg)',                 'transform': 'rotate('+rotate+'deg)'             });             setTimeout(function() {                 $('.dialog').addClass('active').find('p').html('恭喜您獲得 <em>'+awards(rotate%360)+'</em> 元<br>將在公眾號發放微信紅包');                 $('.turntable-pointer').removeClass('disable');             }, 1000);             originRotate = rotate;         }         // 點選         var times = 3; // 3次機會         $('.turntable-times strong').text(times);         $('.turntable-pointer').click(function() {             if(!$(this).hasClass('disable')) {                 $(this).addClass('disable');                 times--;                 if(times >= 0) {                     $('.turntable-times strong').text(times);                     handleTurntable();                 } else {                     $('.dialog').addClass('active').find('p').text('機會已用完！');                     $('.turntable-pointer').removeClass('disable');                 }             }         });         // 關閉dialog         $('.dialog-close').click(function() {             $(this).parents('.dialog').removeClass('active');         });     </script> </body> </html> web前端開發學習Q-q-u-n： 731771211，分享學習的方法和需要注意的小細節，不停更新最新的教程和學習方法（詳細的前端專案實戰教學影片，PDF）
隨心寫寫，希望有幫助~~
web前端入門到實戰：css3 實現大轉盤

相關文章
