2024年Go最新Js实现轮盘抽奖功能，一招帮你解决选择困难症_不知道吃啥抽奖(1)，2024年最新中高级Golang大厂高频面试题

最新推荐文章于 2024-10-07 12:07:59 发布

2401_84925558

最新推荐文章于 2024-10-07 12:07:59 发布

阅读量332

点赞数 9

分类专栏：程序员文章标签： go 学习面试

本文链接：https://blog.csdn.net/2401_84925558/article/details/138832404

版权

程序员专栏收录该内容

56 篇文章 0 订阅

订阅专栏

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

     \*{
         margin:0;
         padding:0;
     }

     body{
         display: flex;
         justify-content: center;
         align-items: center;
         height: 100vh;
     }

.outher是整个div块的样式设置，设置为一个圆形.
.wapper是将整个圆形分为八个部分，transform:rotate(22.5deg)定义 2D 旋转，选择了22.5deg正好使得箭头正对着每一部分的中间位置。

     .outher{
         width:300px;
         height: 300px;
         position: relative;
         border-radius: 50%;
     }

     .wapper{
         width:300px;
         height: 300px;
         border-radius: 50%;
         overflow: hidden;
         transform:rotate(22.5deg);
      }

在这里插入图片描述
整个圆的宽度为300px，分成两部分每一部分都是150px。

  .left{
          position: absolute;
          width: 150px;
          height: 300px;
          left:0;
          overflow: hidden;
      }
   .right{
          position: absolute;
          width: 150px;
          height: 300px;
          right:0;
          overflow: hidden;
          text-align: center;
      }

这里设置的transform-origin: right center左半部分以右侧的中心点为转轴旋转，右半部分以左侧的中心点为旋转轴旋转。第一个div块不需要旋转，两部分因分别分成了4块，所以第二个旋转的度数就是45deg，第三个就是90deg。而且给每一部分设置交叉的颜色，区分开每一块。

    .left div{
        position: absolute;
        top:0;
        left:0;
        width: 100%;
        height: 100%;
        transform-origin: right center;
    }
    .left div.one{
        background-color: #FC7C7B;
    }  
    .left div.two{
        background-color: #F59462;
        transform:rotate(-45deg);
    }
    .left div.three{
        background-color: #FC7C7B;
        transform:rotate(-90deg);
    }

    .left div.four{
        background-color: #F59462;
        transform:rotate(-135deg);
    } 
    
   .right div{
        position: absolute;
        top:0;
        left:0;
        width: 100%;
        height: 100%;
        transform-origin: left center;
    } 
    .right div.one{
        background-color: #F59462;
    }
    .right div.two{
        background-color: #FC7C7B;
        transform:rotate(45deg);
    }
    .right div.three{
        background-color: #F59462;
        transform:rotate(90deg);
    }
    .right div.four{  
        background-color: #FC7C7B;
        transform:rotate(135deg);
    }

每一小部分中文字的样式设置，分别旋转22.5deg处于每一部分的中间位置。

  .left .text{
          position: absolute;
          top:30px;
          left:55%;
          transform:rotate(-22.5deg);
          text-align: center;
      }

      .right .text{
          position: absolute;
          top:25px;
          left:11%;
          transform:rotate(22.5deg);
          text-align: center;
      }

这一部分就是中间抽奖和箭头的样式设置了。箭头就是一个三角形，位置正好处于小圆型的正中心。

    .circle{
        width: 100px;
        height: 100px;
        background-color: white;
        position: absolute;
        left:50%;
        top:50%;
        transform:translate(-50%,-50%);
        border-radius: 50%;
        text-align: center;
        line-height: 100px;
        font-size: 30px;
        font-weight: bold;
        cursor: pointer;
        user-select: none;
    }
    
    .circle:after{
         width: 0;
         height: 0;
         border:40px solid white;
         border-left-width: 10px;
         border-right-width: 10px;
         position: absolute;
         content:"";
         border-left-color: transparent;
         border-top-color: transparent;
         border-right-color: transparent;
         top:-70px;
         left:calc(50% - 10px);
         z-index: -1;
    }



![img](https://img-blog.csdnimg.cn/img_convert/804f73e27cecd265f6868ee5bf5c4cca.png)
![img](https://img-blog.csdnimg.cn/img_convert/8775b05b28ef68ec5c9d20e65ee8c512.png)
![img](https://img-blog.csdnimg.cn/img_convert/363c556165d4d20ddf15979b2d1f0c18.png)

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上Go语言开发知识点，真正体系化！**

**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新**

**[如果你需要这些资料，可以戳这里获取](https://bbs.csdn.net/topics/618658159)**

合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上Go语言开发知识点，真正体系化！**

**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新**

**[如果你需要这些资料，可以戳这里获取](https://bbs.csdn.net/topics/618658159)**