当前位置：主页 > 查看内容

用CSS实现一个抽奖转盘(附详细代码+思路)

发布时间：2021-09-12 00:00| 有 位朋友查看

简介：基本是用CSS实现的，没有用图片，加一丢丢JS。完全没有考虑兼容性。 首先画一个转盘 !DOCTYPEhtml html lang = en head meta charset = UTF-8 title 幸运大转盘 / title style /*重置默认样式*/ *{ margin:0; padding:0; border:none; outline:none; } .wrap……

 

基本是用CSS实现的，没有用图片，加一丢丢JS。完全没有考虑兼容性。

首先画一个转盘

  1. <!DOCTYPE html><html lang="en">  
  2. <head>  
  3.   <meta charset="UTF-8">  
  4.   <title>幸运大转盘</title>  
  5.   <style>  
  6.     /* 重置默认样式 */  
  7.     * {  
  8.       margin: 0;  
  9.       padding: 0;  
  10.       border: none;  
  11.       outline: none;  
  12.     }  
  13.     .wrapper {  
  14.       position: relative;  
  15.       height: 200px;  
  16.       width: 200px;  
  17.       padding: 20px;  
  18.       margin: 20px;  
  19.       background-color: #c0381f;  
  20.       box-shadow: #000000 0px 0px 10px;  
  21.       border-radius: 50%;  
  22.     }  
  23.     .panel {  
  24.       position: relative; 
  25.       height: 200px;  
  26.       width: 200px; 
  27.       background-color: #b7b7b7;  
  28.       border-radius: 100px;  
  29.     }  
  30.     .pointer {  
  31.       position: absolute;  
  32.       left: 79px;  
  33.       top: 79px;  
  34.       z-index: 10;  
  35.       height: 30px;  
  36.       width: 30px;  
  37.       padding: 6px;  
  38.       color: #fff899;  
  39.       line-height: 15px;  
  40.       font-size: 12px;  
  41.       text-align: center;  
  42.       background-color: #dc5b5b;  
  43.       border-radius: 50%;  
  44.       border: 1px solid #c0381f;  
  45.     }  
  46. </style>  
  47. </head>  
  48. <body>  
  49.   <div class="wrapper">  
  50.     <div class="panel">  
  51.       <div class="pointer">开始抽奖</div>  
  52.     </div>  
  53.   </div>  
  54. </body>  
  55. </html> 

效果如下，配色什么的不要在意，可能比较丑。。。

然后写抽奖指针的小箭头，用CSS画三角形是一个比较常见的问题，通过设置width和height为0，然后用border实现。

如图，矩形是由四个三角形边框组成的，只要设置其它边颜色为透明，就可以获得单独的三角形。

这里通过伪元素after实现三角形，并通过绝对定位将三角形定位到中间小圆的顶端。

  1. .pointer::after {  
  2.       content: '';  
  3.       position: absolute;  
  4.       left: 14px;  
  5.       top: -24px;  
  6.       border-width: 12px 6px;  
  7.       border-style: solid;  
  8.       border-color: transparent;  
  9.       border-bottom-color: #c0381f;  
  10. } 

现在才像一个指针了。

哦 接下来是实现转盘背景，不同的扇区对应不同的奖品，这样就有一个需求：实现任意角度扇形。

可能会想当然的认为和三角形一样，不过是加一个border-radius而已，高度是圆半径，宽度是tan(θ/2)，但是实现出来的效果和想象并不一样……（可能需要做一些其他操作以达到效果，但是我没想到。

最后还是求助了搜索引擎。不得不承认dalao们实在是太nb了，qaq……通过 linear-gradient 实现想法是真的棒。不过还有好多复杂的实现看的不是很懂= =

How to draw a circle sector in CSS?

Segments in a circle using CSS3

3种纯CSS实现中间镂空的12色彩虹渐变圆环方法

实现就是通过两个正方形取相交区域。

我觉图画的还是挺好的:D

没有用伪元素实现，因为我还要加文字，至于文字的位置，我真的是瞎调的，反正正经写代码也不会这么写= =

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8"> 
  5.     <title>Document</title>  
  6.     <style>  
  7.         .sector {  
  8.             position: absolute;  
  9.             width: 100px;  
  10.             height: 200px;  
  11.             margin: 100px;  
  12.             border-radius: 0px 100px 100px 0;  
  13.             overflow: hidden;  
  14.             transform: rotate(-18deg);  
  15.         }  
  16.         .sector-inner {  
  17.             text-align: center;  
  18.             display: block;  
  19.             width: 40px;  
  20.             padding: 5px 3px 0 57px;  
  21.             height: 195px;  
  22.             background: #ffeab1;  
  23.             transform: translateX(-100px) rotate(36deg);  
  24.             transform-origin: right center;  
  25.             border-radius: 100px 0 0 100px;  
  26.         }  
  27.         .sector-inner span {  
  28.             display: block;  
  29.             transform-origin: center;  
  30.             transform: rotate(-19deg);  
  31.             color: #d46854;  
  32.         }  
  33. </style>  
  34. </head>  
  35. <body>  
  36.     <div class="sector">  
  37.         <div class="sector-inner">  
  38.             <span>谢谢参与</span>  
  39.         </div>  
  40.     </div>  
  41. </body>  
  42. </html> 

效果如下，一个带有文字的小扇形~~

OK，现在写一堆扇形放到一开始的转盘上。

现在的代码是酱紫滴~~太长了折起来。

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.   <meta charset="UTF-8">  
  5.   <title>幸运大转盘</title>  
  6.   <style>  
  7.     /* 重置默认样式 */  
  8.     * {  
  9.       margin: 0;  
  10.       padding: 0;  
  11.       border: none;  
  12.       outline: none;  
  13.     }  
  14.     .wrapper {  
  15.       position: relative;  
  16.       height: 200px;  
  17.       width: 200px;  
  18.       padding: 20px;  
  19.       margin: 20px;  
  20.       background-color: #c0381f;  
  21.       box-shadow: #000000 0px 0px 10px; 
  22.       border-radius: 50%;  
  23.     }  
  24.     .panel {  
  25.       position: relative;  
  26.       height: 200px;  
  27.       width: 200px;  
  28.       background-color: #b7b7b7;  
  29.       border-radius: 100px;  
  30.     }  
  31.     .sector {  
  32.       position: absolute;  
  33.       width: 100px;  
  34.       height: 200px;  
  35.       border-radius: 0px 100px 100px 0;  
  36.       overflow: hidden;  
  37.       left: 100px;  
  38.       top: 0px;  
  39.       transform-origin: left center;  
  40.     }  
  41.     .sector:nth-child(1) {  
  42.       transform: rotate(-18deg);  
  43.     }  
  44.     .sector:nth-child(2) {  
  45.       transform: rotate(18deg);  
  46.     }  
  47.     .sector:nth-child(3) {  
  48.       transform: rotate(54deg);  
  49.     }  
  50.     .sector:nth-child(4) {  
  51.       transform: rotate(90deg);  
  52.     }  
  53.     .sector:nth-child(5) {  
  54.       transform: rotate(126deg);  
  55.     }  
  56.     .sector:nth-child(6) {  
  57.       transform: rotate(162deg);  
  58.     }  
  59.     .sector:nth-child(7) {  
  60.       transform: rotate(198deg);  
  61.     }  
  62.     .sector:nth-child(8) {  
  63.       transform: rotate(234deg);  
  64.     }  
  65.     .sector:nth-child(9) { 
  66.        transform: rotate(270deg);  
  67.     }  
  68.     .sector:nth-child(10) { 
  69.        transform: rotate(306deg);  
  70.     }  
  71.     .sector:nth-child(2n+1) .sector-inner {  
  72.       background: #fef6e0;  
  73.     }  
  74.     .sector:nth-child(2n) .sector-inner {  
  75.       background: #ffffff;  
  76.     }  
  77.     .sector-inner {  
  78.       text-align: center;  
  79.       display: block;  
  80.       width: 40px;  
  81.       padding: 5px 3px 0 57px;  
  82.       height: 195px;  
  83.       transform: translateX(-100px) rotate(36deg);  
  84.       transform-origin: right center;  
  85.       border-radius: 100px 0 0 100px;  
  86.     }  
  87.     .sector-inner span {  
  88.       display: block;  
  89.       transform-origin: center;  
  90.       transform: rotate(-19deg);  
  91.       color: #d46854;  
  92.     }  
  93.     .pointer {  
  94.       position: absolute;  
  95.       left: 79px;  
  96.       top: 79px;  
  97.       z-index: 10;  
  98.       height: 30px;  
  99.       width: 30px;  
  100.       padding: 6px;  
  101.       color: #fff899;  
  102.       line-height: 15px;  
  103.       font-size: 12px;  
  104.       text-align: center;  
  105.       background-color: #dc5b5b;  
  106.       border-radius: 50%;  
  107.       border: 1px solid #c0381f;  
  108.     }  
  109.     .pointer::after {  
  110.       content: '';  
  111.       position: absolute;  
  112.       left: 14px;  
  113.       top: -24px;  
  114.       border-width: 12px 6px;  
  115.       border-style: solid;  
  116.       border-color: transparent;  
  117.       border-bottom-color: #c0381f;  
  118.     }  
  119. </style>  
  120. </head>  
  121. <body>  
  122.   <div class="wrapper">  
  123.     <div class="panel">  
  124.       <div class="sector">  
  125.         <div class="sector-inner">  
  126.           <span>谢谢参与</span>  
  127.         </div>  
  128.       </div> 
  129.        <div class="sector">  
  130.         <div class="sector-inner">  
  131.           <span> 50 积分</span>  
  132.         </div>  
  133.       </div>  
  134.       <div class="sector">  
  135.         <div class="sector-inner">  
  136.           <span>谢谢参与</span>  
  137.         </div>  
  138.       </div>  
  139.       <div class="sector">  
  140.         <div class="sector-inner">  
  141.           <span>100话费</span>  
  142.         </div>  
  143.       </div>  
  144.       <div class="sector">  
  145.         <div class="sector-inner">  
  146.           <span> 50 积分</span>  
  147.         </div>  
  148.       </div>  
  149.       <div class="sector">  
  150.         <div class="sector-inner">  
  151.           <span>谢谢参与</span>  
  152.         </div>  
  153.       </div>  
  154.       <div class="sector">  
  155.         <div class="sector-inner">  
  156.           <span>100话费</span>  
  157.         </div>  
  158.       </div>  
  159.       <div class="sector">  
  160.         <div class="sector-inner">  
  161.           <span>谢谢参与</span>  
  162.         </div>  
  163.       </div>  
  164.       <div class="sector">  
  165.         <div class="sector-inner">  
  166.           <span> 50 积分</span>  
  167.         </div>  
  168.       </div>  
  169.       <div class="sector">  
  170.         <div class="sector-inner">  
  171.           <span>10元话费</span>  
  172.         </div>  
  173.       </div>  
  174.       <div class="pointer">开始抽奖</div>  
  175.     </div>  
  176.   </div>  
  177. </body>  
  178. </html> 

嘻嘻，现在是抽奖转盘的样子了吧~~~

最后再加点浮夸的灯。

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.   <meta charset="UTF-8">  
  5.   <title>幸运大转盘</title>  
  6.   <style>  
  7.     /* 重置默认样式 */  
  8.     * {  
  9.       margin: 0;  
  10.       padding: 0;  
  11.       border: none;  
  12.       outline: none;  
  13.     }  
  14.     .wrapper {  
  15.       position: relative; 
  16.       height: 200px;  
  17.       width: 200px;  
  18.       padding: 20px;  
  19.       margin: 20px;  
  20.       background-color: #c0381f;  
  21.       box-shadow: #000000 0px 0px 10px;  
  22.       border-radius: 50%;  
  23.     }  
  24.     .light { 
  25.       position: absolute;  
  26.       height: 10px;  
  27.       width: 10px;  
  28.       border-radius: 50%;  
  29.       top: 5px;  
  30.       left: 115px;  
  31.       transform-origin: 5px 115px;  
  32.     }  
  33.     .light:nth-child(2n) {  
  34.       background-color: #fafce7;  
  35.     }  
  36.     .light:nth-child(2n+1) {  
  37.       background-color: #ffe58b;  
  38.     }  
  39.     .light:nth-child(2) {  
  40.       transform: rotate(36deg);  
  41.     }  
  42.     .light:nth-child(3) {  
  43.       transform: rotate(72deg);  
  44.     }  
  45.     .light:nth-child(4) {  
  46.       transform: rotate(108deg);  
  47.     }  
  48.     .light:nth-child(5) {  
  49.       transform: rotate(144deg);  
  50.     }  
  51.     .light:nth-child(6) {  
  52.       transform: rotate(180deg);  
  53.     }  
  54.     .light:nth-child(7) {  
  55.       transform: rotate(216deg);  
  56.     }  
  57.     .light:nth-child(8) {  
  58.       transform: rotate(252deg);  
  59.     }  
  60.     .light:nth-child(9) {  
  61.       transform: rotate(288deg);  
  62.     }  
  63.     .light:nth-child(10) {  
  64.       transform: rotate(324deg); 
  65.      }  
  66.     .panel {  
  67.       position: relative;  
  68.       height: 200px; 
  69.        width: 200px;  
  70.       background-color: #b7b7b7;  
  71.       border-radius: 100px;  
  72.     }  
  73.     .sector {  
  74.       position: absolute;  
  75.       width: 100px;  
  76.       height: 200px;  
  77.       border-radius: 0px 100px 100px 0;  
  78.       overflow: hidden;  
  79.       left: 100px;  
  80.       top: 0px;  
  81.       transform-origin: left center;  
  82.     }  
  83.     .sector:nth-child(1) {  
  84.       transform: rotate(-18deg);  
  85.     }  
  86.     .sector:nth-child(2) {  
  87.       transform: rotate(18deg);  
  88.     }  
  89.     .sector:nth-child(3) {  
  90.       transform: rotate(54deg);  
  91.     }  
  92.     .sector:nth-child(4) {  
  93.       transform: rotate(90deg);  
  94.     }  
  95.     .sector:nth-child(5) {  
  96.       transform: rotate(126deg);  
  97.     }  
  98.     .sector:nth-child(6) {  
  99.       transform: rotate(162deg);  
  100.     }  
  101.     .sector:nth-child(7) {  
  102.       transform: rotate(198deg);  
  103.     }  
  104.     .sector:nth-child(8) {  
  105.       transform: rotate(234deg);  
  106.     }  
  107.     .sector:nth-child(9) {  
  108.       transform: rotate(270deg);  
  109.     }  
  110.     .sector:nth-child(10) {  
  111.       transform: rotate(306deg);  
  112.     }  
  113.     .sector:nth-child(2n+1) .sector-inner {  
  114.       background: #fef6e0;  
  115.     }  
  116.     .sector:nth-child(2n) .sector-inner {  
  117.       background: #ffffff;  
  118.     }  
  119.     .sector-inner {  
  120.       text-align: center;  
  121.       display: block;  
  122.       width: 40px;  
  123.       padding: 5px 3px 0 57px;  
  124.       height: 195px;  
  125.       transform: translateX(-100px) rotate(36deg);  
  126.       transform-origin: right center;  
  127.       border-radius: 100px 0 0 100px;  
  128.     }  
  129.     .sector-inner span {  
  130.       display: block;  
  131.       transform-origin: center;  
  132.       transform: rotate(-19deg); 
  133.        color: #d46854;  
  134.     }  
  135.     .pointer {  
  136.       position: absolute;  
  137.       left: 79px;  
  138.       top: 79px;  
  139.       z-index: 10;  
  140.       height: 30px;  
  141.       width: 30px; 
  142.        padding: 6px; 
  143.       color: #fff899;  
  144.       line-height: 15px;  
  145.       font-size: 12px;  
  146.       text-align: center;  
  147.       background-color: #dc5b5b;  
  148.       border-radius: 50%;  
  149.       border: 1px solid #c0381f;  
  150.     }  
  151.     .pointer::after {  
  152.       content: '';  
  153.       position: absolute;  
  154.       left: 14px;  
  155.       top: -24px;  
  156.       border-width: 12px 6px;  
  157.       border-style: solid;  
  158.       border-color: transparent;  
  159.       border-bottom-color: #c0381f;  
  160.     }  
  161. </style>  
  162. </head>  
  163. <body>  
  164.   <div class="wrapper">  
  165.     <div class="light"></div>  
  166.     <div class="light"></div>  
  167.     <div class="light"></div>  
  168.     <div class="light"></div>  
  169.     <div class="light"></div>  
  170.     <div class="light"></div>  
  171.     <div class="light"></div>  
  172.     <div class="light"></div>  
  173.     <div class="light"></div>  
  174.     <div class="light"></div>  
  175.     <div class="panel">  
  176.       <div class="sector">  
  177.         <div class="sector-inner">  
  178.           <span>谢谢参与</span>  
  179.         </div>  
  180.       </div>  
  181.       <div class="sector">  
  182.         <div class="sector-inner">  
  183.           <span> 50 积分</span>  
  184.         </div>  
  185.       </div>  
  186.       <div class="sector">  
  187.         <div class="sector-inner">  
  188.           <span>谢谢参与</span>  
  189.         </div>  
  190.       </div>  
  191.       <div class="sector">  
  192.         <div class="sector-inner">  
  193.           <span>100话费</span>  
  194.         </div>  
  195.       </div> 
  196.        <div class="sector">  
  197.         <div class="sector-inner">  
  198.           <span> 50 积分</span>  
  199.         </div>  
  200.       </div>  
  201.       <div class="sector">  
  202.         <div class="sector-inner">  
  203.           <span>谢谢参与</span>  
  204.         </div>  
  205.       </div>  
  206.       <div class="sector">  
  207.         <div class="sector-inner">  
  208.           <span>100话费</span>  
  209.         </div>  
  210.       </div>  
  211.       <div class="sector">  
  212.         <div class="sector-inner">  
  213.           <span>谢谢参与</span>  
  214.         </div>  
  215.       </div>  
  216.       <div class="sector">  
  217.         <div class="sector-inner">  
  218.           <span> 50 积分</span>  
  219.         </div>  
  220.       </div>  
  221.       <div class="sector">  
  222.         <div class="sector-inner">  
  223.           <span>10元话费</span>  
  224.         </div>  
  225.       </div>  
  226.       <div class="pointer">开始抽奖</div>  
  227.     </div>  
  228.   </div>  
  229. </body>  
  230. </html> 

现在转盘CSS部分基本完成。简单写一下JS部分。点击中间的指针时，指针会转，可以拉一条贝塞尔曲线，控制动画的速度。

贝塞尔曲线可以简单的看作是时间-距离曲线，斜率就是速度。因为转盘的速度肯定是先快后慢，随便拉一条。

http://cubic-bezier.com/#.2,.93,.43,1

CSS中添加属性

  1. .pointer {  
  2.   // ...  
  3.   transition: transform 3s cubic-bezier(.2,.93,.43,1);  
  4. } 

点击开始抽奖的时候，为中间的指针加一个旋转的角度。这里有一个问题就是不同的扇区抽到的概率是相同的，改成不同应该…也蛮简单的，不过主要是想练下CSS，JS就随便写了。

JS部分代码。。

  1. let getEle = document.getElementsByClassName.bind(document);  
  2. let pointer = getEle('pointer')[0];  
  3. let result = getEle('result')[0];   
  4. let onRotation = false; // 记录当前是否正在旋转，如果正在旋转，就不能继续点击了  
  5. let reward = ['谢谢参与', '50积分', '谢谢参与', '100元话费', '50积分',   
  6. '谢谢参与', '100元话费', '谢谢参与', '50积分', '10元话费'];   
  7. // 根据随机角度获取奖励  
  8. let getReward = (function() {  
  9.   currentDeg = 0;  
  10.   return function() {  
  11.     // 转三圈到四圈  
  12.     let rotateDeg = Math.random() * 360 + 1080;  
  13.     currentDeg += rotateDeg;  
  14.     let rewardrewardText = reward[Math.floor((currentDeg + 18) % 360 / 36)]  
  15.     return {  
  16.       deg: currentDeg,  
  17.       text: rewardText === '谢谢参与' ? '很遗憾，您没有获得奖品。' : '恭喜获得: ' + rewardText 
  18.      }  
  19.   }  
  20. })();    
  21. pointer.addEventListener('click', () => {  
  22.   if (onRotation) return;  
  23.   console.log('开始抽奖');  
  24.   onRotation = true;  
  25.   let nextStatus = getReward();  
  26.   console.log(nextStatus)  
  27.   result.innerText = nextStatus.text;  
  28.   result.style.display = 'none';  
  29.   pointer.style.transform = `rotateZ(${nextStatus.deg}deg)`;  
  30. })  
  31. pointer.addEventListener('transitionend', () => {  
  32.   console.log('抽奖结束');  
  33.   onRotation = false;  
  34.   result.style.display = 'block';  
  35. }) 

现在一个抽奖转盘基本完成了，最后一个需求，如果旁边的等能够亮起来就好了。

至于灯怎么亮，就需要用到CSS3的动画了，我还不太熟悉，先去学习一下>_<

我学完回来了，参考教程http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html，内容不是很多。

animation-name 指定动画名称，

animation-duration 指定动画持续时间，

animation-timing-function 指定动画函数，和transition的函数是一样的，

animation-delay 指定动画延迟多久后执行，

animation-iteration-count 指定动画执行多少次，默认为一次，可以指定为infinite，无限循环。

animation-direction 指定动画多次播放时，一次结束，下一次怎么接上一次，如图。

animation-fill-mode 指定动画结束后停在什么位置，默认回到起始状态，forwards表示让动画停留在结束状态，backwards让动画回到第一帧的状态，both根据animation-direction轮流应用forwards和backwards规则。

animation-play-state 动画执行状态，默认为running，可以设置为pause，动画将在当前状态停止，再改为running时，会接着上一次停止的位置继续执行动画。

使用关键字 keyframes 来定义一个动画。通过百分比指定其中任意几个状态。

尝试着写一下=。=

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Document</title>  
  6.     <style>  
  7.         div {  
  8.             height: 30px;  
  9.             width: 30px;  
  10.             animation: 1s twinkling 3, 100ms 3s twinkling 3;  
  11.         }  
  12.         @keyframes twinkling {  
  13.             50% { background: red; }  
  14.         }  
  15. </style>  
  16. </head>  
  17. <body>  
  18.     <div></div>  
  19. </body>  
  20. </html> 

这是一个方块，先慢速闪三下，再快速闪三下，最后消失。

animation: 1s twinkling 3;

就相当于

animation-name: twinkling;

animation-duration: 1s;

animation-timing-function: ease;

animation-delay: 0s;

animation-iteration-count: 3;

animation-direction: normal;

animation-fill-mode: none;

animation-play-state: running;

效果

我觉得还可以:P 反正我只能写成这样了。

最后把动画加到转盘的灯上。完成代码（好像颜色变了，咳，那是因为我animation学了太久都掉色了）：

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.   <meta charset="UTF-8">  
  5.   <title>幸运大转盘</title>  
  6.   <style>  
  7.     * { /* 重置默认样式 */  
  8.       margin: 0;  
  9.       padding: 0;  
  10.       border: none;  
  11.       outline: none;  
  12.       user-select: none;  
  13.     }  
  14.     .wrapper {  
  15.       position: relative;  
  16.       height: 200px;  
  17.       width: 200px; 
  18.        padding: 20px;  
  19.       margin: 20px;  
  20.       background-color: #ff5555;  
  21.       box-shadow: #000000 0px 0px 10px;  
  22.       border-radius: 50%;  
  23.     }  
  24.     .light {  
  25.       position: absolute;  
  26.       height: 10px;  
  27.       width: 10px;  
  28.       border-radius: 50%;  
  29.       top: 5px;  
  30.       left: 115px;  
  31.       transform-origin: 5px 115px;  
  32.     }  
  33.     .light-twinkling {  
  34.       animation: 1s twinkling 3, 100ms 3s twinkling 3;  
  35.     }  
  36.     .light:nth-child(2n) {  
  37.       background-color: #fafce7;  
  38.     }  
  39.     .light:nth-child(2n+1) {  
  40.       background-color: #ffe58b;  
  41.     }  
  42.     .light:nth-child(2) {  
  43.       transform: rotate(36deg);  
  44.     }  
  45.     .light:nth-child(3) {  
  46.       transform: rotate(72deg);  
  47.     }  
  48.     .light:nth-child(4) {  
  49.       transform: rotate(108deg);  
  50.     }  
  51.     .light:nth-child(5) {  
  52.       transform: rotate(144deg);  
  53.     }  
  54.     .light:nth-child(6) {  
  55.       transform: rotate(180deg);  
  56.     }  
  57.     .light:nth-child(7) {  
  58.       transform: rotate(216deg);  
  59.     }  
  60.     .light:nth-child(8) {  
  61.       transform: rotate(252deg);  
  62.     }  
  63.     .light:nth-child(9) {  
  64.       transform: rotate(288deg);  
  65.     }  
  66.     .light:nth-child(10) {  
  67.       transform: rotate(324deg);  
  68.     }  
  69.     .panel {  
  70.       position: relative;  
  71.       height: 200px; 
  72.        width: 200px;  
  73.       background-color: #b7b7b7;  
  74.       border-radius: 100px;  
  75.     }  
  76.     .sector {  
  77.       position: absolute;  
  78.       left: 100px;  
  79.       top: 0px; 
  80.        width: 100px;  
  81.       height: 200px;  
  82.       font-size: 14px;  
  83.       border-radius: 0px 100px 100px 0;  
  84.       overflow: hidden;  
  85.       transform-origin: left center;  
  86.     }  
  87.     .sector:nth-child(1) {  
  88.       transform: rotate(-18deg);  
  89.     }  
  90.     .sector:nth-child(2) {  
  91.       transform: rotate(18deg);  
  92.     }  
  93.     .sector:nth-child(3) {  
  94.       transform: rotate(54deg);  
  95.     }  
  96.     .sector:nth-child(4) {  
  97.       transform: rotate(90deg);  
  98.     }  
  99.     .sector:nth-child(5) { 
  100.        transform: rotate(126deg);  
  101.     }  
  102.     .sector:nth-child(6) {  
  103.       transform: rotate(162deg);  
  104.     }  
  105.     .sector:nth-child(7) {  
  106.       transform: rotate(198deg);  
  107.     }  
  108.     .sector:nth-child(8) {  
  109.       transform: rotate(234deg);  
  110.     }  
  111.     .sector:nth-child(9) {  
  112.       transform: rotate(270deg);  
  113.     }  
  114.     .sector:nth-child(10) {  
  115.       transform: rotate(306deg);  
  116.     }  
  117.     .sector:nth-child(2n+1) .sector-inner { 
  118.       background: #fef6e0;  
  119.     }  
  120.     .sector:nth-child(2n) .sector-inner {  
  121.       background: #ffffff;  
  122.     }  
  123.     .sector-inner {  
  124.       text-align: center;  
  125.       display: block;  
  126.       width: 40px;  
  127.       padding: 5px 3px 0 57px;  
  128.       height: 195px;  
  129.       transform: translateX(-100px) rotate(36deg);  
  130.       transform-origin: right center;  
  131.       border-radius: 100px 0 0 100px;  
  132.     }  
  133.     .sector-inner span {  
  134.       display: block; 
  135.        transform-origin: center;  
  136.       transform: rotate(-19deg); 
  137.        color: #d46854;  
  138.     }  
  139.     .pointer {  
  140.       position: absolute;  
  141.       left: 79px;  
  142.       top: 79px;  
  143.       z-index: 10;  
  144.       height: 30px;  
  145.       width: 30px;  
  146.       padding: 6px;  
  147.       color: #fff899;  
  148.       line-height: 15px;  
  149.       font-size: 12px; 
  150.        text-align: center;  
  151.       background-color: #ff5350;  
  152.       border-radius: 50%;  
  153.       border: 1px solid #ff5350;  
  154.       transition: transform 3s cubic-bezier(.2,.93,.43,1);  
  155.     }  
  156.     .pointer::after {  
  157.       content: ''; 
  158.        position: absolute;  
  159.       left: 14px; 
  160.        top: -24px;  
  161.       border-width: 12px 6px;  
  162.       border-style: solid;  
  163.       border-color: transparent;  
  164.       border-bottom-color: #ff5350;  
  165.       transform-origin: center;  
  166.     }  
  167.     .result {  
  168.       margin: 20px 60px;  
  169.     }  
  170.     @keyframes twinkling {  
  171.       50% { background: transparent; }  
  172.     }  
  173. </style>  
  174. </head>  
  175. <body>  
  176.   <div class="wrapper">  
  177.     <div class="light"></div>  
  178.     <div class="light"></div>  
  179.     <div class="light"></div>  
  180.     <div class="light"></div>  
  181.     <div class="light"></div>  
  182.     <div class="light"></div>  
  183.     <div class="light"></div>  
  184.     <div class="light"></div>  
  185.     <div class="light"></div>  
  186.     <div class="light"></div>  
  187.     <div class="panel">  
  188.       <div class="sector">  
  189.         <div class="sector-inner">  
  190.           <span>谢谢参与</span>  
  191.         </div>  
  192.       </div>  
  193.       <div class="sector">  
  194.         <div class="sector-inner">  
  195.           <span> 5 0 积分</span>  
  196.         </div>  
  197.       </div>  
  198.       <div class="sector">  
  199.         <div class="sector-inner">  
  200.           <span>谢谢参与</span>  
  201.         </div>  
  202.       </div>  
  203.       <div class="sector">  
  204.         <div class="sector-inner">  
  205.           <span>100元话费</span>  
  206.         </div>  
  207.       </div>  
  208.       <div class="sector">  
  209.         <div class="sector-inner">  
  210.           <span> 5 0 积分</span>  
  211.         </div>  
  212.       </div>  
  213.       <div class="sector">  
  214.         <div class="sector-inner">  
  215.           <span>谢谢参与</span>  
  216.         </div> 
  217.        </div>  
  218.       <div class="sector"> 
  219.          <div class="sector-inner">  
  220.           <span>100元话费</span>  
  221.         </div>  
  222.       </div>  
  223.       <div class="sector">  
  224.         <div class="sector-inner">  
  225.           <span>谢谢参与</span>  
  226.         </div>  
  227.       </div>  
  228.       <div class="sector">  
  229.         <div class="sector-inner">  
  230.           <span> 5 0 积分</span>  
  231.         </div>  
  232.       </div>  
  233.       <div class="sector">  
  234.         <div class="sector-inner">  
  235.           <span>10元话费</span>  
  236.         </div>  
  237.       </div> 
  238.        <div class="pointer">开始抽奖</div>  
  239.     </div>  
  240.   </div>  
  241.   <div class="result"></div>  
  242.   <script>  
  243.     let getEle = document.getElementsByClassName.bind(document);  
  244.     let pointer = getEle('pointer')[0];  
  245.     let result = getEle('result')[0];  
  246.     let lights = Array.prototype.slice.call(getEle('light'));  
  247.     let onRotation = false; // 记录当前是否正在旋转，如果正在旋转，就不能继续点击了  
  248.     let reward = ['谢谢参与', '50积分', '谢谢参与', '100元话费', '50积分',   
  249.     '谢谢参与', '100元话费', '谢谢参与', '50积分', '10元话费'];  
  250.     // 根据随机角度获取奖励  
  251.     let getReward = (function() {  
  252.       currentDeg = 0;  
  253.       return function() {  
  254.         // 转三圈到四圈  
  255.         let rotateDeg = Math.random() * 360 + 1080;  
  256.         currentDeg += rotateDeg;  
  257.         let rewardrewardText = reward[Math.floor((currentDeg + 18) % 360 / 36)]  
  258.         return {  
  259.           deg: currentDeg,  
  260.           text: rewardText === '谢谢参与' ? '很遗憾，您没有获得奖品。' : '恭喜获得: ' + rewardText  
  261.         }  
  262.       }  
  263.     })();  
  264.     pointer.addEventListener('click', () => {  
  265.       if (onRotation) return;  
  266.       console.log('开始抽奖');  
  267.       onRotation = true;  
  268.       lights.forEach(light => { light.className += ' light-twinkling'; });  
  269.       let nextStatus = getReward();  
  270.       console.log(nextStatus)  
  271.       result.innerText = nextStatus.text;  
  272.       result.style.display = 'none';  
  273.       pointer.style.transform = `rotateZ(${nextStatus.deg}deg)`;  
  274.     })  
  275.     pointer.addEventListener('transitionend', () => {  
  276.       console.log('抽奖结束');  
  277.       setTimeout(() => { // 等闪烁三下结束  
  278.         onRotation = false;  
  279.         lights.forEach(light => { light.className = 'light'; });  
  280.         result.style.display = 'block';  
  281.       }, 300);  
  282.     })  
  283. </script>  
  284. </body>  
  285. </html>  
【责任编辑：庞桂玉 TEL：（010）68476606】
本文转载自网络，原文链接：https://mp.weixin.qq.com/s/nTNt5CeD4k5siYpI-0ZiNA
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！
上一篇：20个值得学习的Python技巧 下一篇：没有了

推荐图文

  • 周排行
  • 月排行
  • 总排行

随机推荐