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）
隨心寫寫，希望有幫助~~
來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69901074/viewspace-2673209/，如需轉載，請註明出處，否則將追究法律責任。
相關文章
- web前端入門到實戰：30行前端程式碼實現任意文字轉粒子Web前端
- web前端入門到實戰：Js代理模式Web前端JS模式
- web前端入門到實戰：H5-canvas實現粒子時鐘Web前端H5Canvas
- web前端入門到實戰：css3迴圈，模擬拼多多動畫效果Web前端CSSS3動畫
- web前端入門到實戰：JS中new操作符原始碼實現Web前端JS原始碼
- css3 實現大轉盤CSSS3
- web前端入門到實戰：非同步載入CSS最簡單的實現方式Web前端非同步CSS
- web前端入門到實戰：HTML元素巢狀問題Web前端HTML巢狀
- web前端入門到實戰：好用的Js圖表庫Web前端JS
- web前端入門到實戰：用css3實現驚豔面試官的背景即背景動畫（高階附原始碼）Web前端CSSS3面試動畫原始碼
- web前端入門到實戰：簡單的圖片輪播Web前端
- web前端入門到實戰：擼兩個天氣小程式Web前端
- web前端入門到實戰：常用網頁元素命名規範Web前端網頁
- 前端大資料視覺化從入門到實戰前端大資料視覺化
- web前端入門到實戰：css騷操作之表單驗證Web前端CSS
- 前端開發入門到實戰：JavaScript字串轉換數字前端JavaScript字串
- Flutter For Web入門實戰FlutterWeb
- Nginx入門到實戰（2）場景實現篇Nginx
- web前端入門到實戰：CSS 層疊上下文（Stacking Context）Web前端CSSContext
- web前端入門到實戰：css滑鼠經過彈出子選單特效Web前端CSS特效
- web前端入門到實戰：js擷取字串相關的知識點Web前端JS字串
- web3從入門到實戰-理論篇Web
- web前端入門到實戰：你真的瞭解CSS繼承嗎？看完必跪Web前端CSS繼承
- Locust 從入門到實戰
- Linux入門到實戰Linux
- Gin + GORM 入門到實戰GoORM
- Redis 從入門到實戰Redis
- metaq入門部署到實戰
- web3從入門到實戰-NFT與代幣Web
- 前端開發入門到實戰：css實現div垂直水平居中的2種常用方法前端CSS
- Docker從入門到實戰pdfDocker
- Docker實戰-從入門到跑路Docker
- 大資料零基礎由入門到實戰大資料
- 大神實戰Web前端最新版培訓視訊教程 專案實戰+基礎入門 Web前端課程 專案篇Web前端
- ffmpeg入門到實戰-ffmpeg是怎麼轉碼的？
- Flutter入門實戰：從0到1仿寫web版掘金AppFlutterWebAPP
- Uni-app從入門到實戰APP
- 微信小程式入門到實戰（三）微信小程式