body {
    background: #cff;
}
.zhu{
  position: fixed;
  top: calc(50% - 250px);
  left: calc(50% - 250px);
  width: 500px;
  height: 500px;
  background: #cff;
}
.zhu .pan{
  position: absolute;
  top: calc(50% - 200px);
  left: calc(50% - 200px);
  width: 400px;
  height: 400px;
}
.zhu .pan .wai{
  width: 100%;
  height: 100%;
  border-radius: 100%;
  background: #fdc081;
}
.zhu .pan .wai::before{
  content: '';
  display: block;
  width: 86%;
  height: 86%;
  border-radius: 100%;
  position: absolute;
  top: 7%;
  left:  7%;
  background-color: #fff;
}
.zhu .pan .wai span{
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.zhu .pan .wai span::before{
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 100%;
  position: absolute;
  top: 6px;
  left:  calc(50% - 8px);
}

.zhu .pan .wai span:nth-child(2){
  transform: rotate(15deg);
}
.zhu .pan .wai span:nth-child(3){
  transform: rotate(30deg);
}
.zhu .pan .wai span:nth-child(4){
  transform: rotate(45deg);
}
.zhu .pan .wai span:nth-child(5){
  transform: rotate(60deg);
}
.zhu .pan .wai span:nth-child(6){
  transform: rotate(75deg);
}
.zhu .pan .wai span:nth-child(7){
  transform: rotate(90deg);
}
.zhu .pan .wai span:nth-child(8){
  transform: rotate(105deg);
}
.zhu .pan .wai span:nth-child(9){
  transform: rotate(120deg);
}
.zhu .pan .wai span:nth-child(10){
  transform: rotate(135deg);
}
.zhu .pan .wai span:nth-child(11){
  transform: rotate(150deg);
}
.zhu .pan .wai span:nth-child(12){
  transform: rotate(165deg);
}
.zhu .pan .wai span:nth-child(13){
  transform: rotate(180deg);
}
.zhu .pan .wai span:nth-child(14){
  transform: rotate(195deg);
}
.zhu .pan .wai span:nth-child(15){
  transform: rotate(210deg);
}
.zhu .pan .wai span:nth-child(16){
  transform: rotate(225deg);
}
.zhu .pan .wai span:nth-child(17){
  transform: rotate(240deg);
}
.zhu .pan .wai span:nth-child(18){
  transform: rotate(255deg);
}
.zhu .pan .wai span:nth-child(19){
  transform: rotate(270deg);
}
.zhu .pan .wai span:nth-child(20){
  transform: rotate(285deg);
}
.zhu .pan .wai span:nth-child(21){
  transform: rotate(300deg);
}
.zhu .pan .wai span:nth-child(22){
  transform: rotate(315deg);
}
.zhu .pan .wai span:nth-child(23){
  transform: rotate(330deg);
}
.zhu .pan .wai span:nth-child(24){
  transform: rotate(345deg);
}
.zhu .pan .wai span:nth-child(2n)::before{
  width: 14px;
  height: 14px;
}
.zhu .pan .wai span:nth-child(4n)::before{
  background-color: #7c83f8;
}
.zhu .pan .wai span:nth-child(4n-1)::before{
  background-color: #7efffd;
}
.zhu .pan .wai span:nth-child(4n-2)::before{
  background-color: #fe7d00;
}
.zhu .pan .wai span:nth-child(4n-3)::before{
  background-color: #e3ff2f;
}


/* 抽奖选项 */
.xuanxiang{
  width: 80%;
  height: 80%;
  background-color: #fff;
  position: absolute;
  top: 10%;
  left: 10%;
  border-radius: 100%;
  overflow: hidden;
  transform:
}
.xuanxiang::after{
  content: '';
  display: block;
  width: 50%;
  height: 50%;
  background-color: #fff;
  position: absolute;
  top: 25%;
  left: 25%;
  border-radius: 100%;
  overflow: hidden;
}
.xuanxiang span{
  width:100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.xuanxiang span::before{
  content: '';
  display:block;
  width:0px;
   border:40px solid transparent;
   border-top-width: 160px;
   border-top-style: solid;
   position: absolute;
   left: calc(50% - 40px);
}
.xuanxiang span:nth-child(2){
  transform: rotate(30deg);
}
.xuanxiang span:nth-child(3){
  transform: rotate(60deg);
}
.xuanxiang span:nth-child(4){
  transform: rotate(90deg);
}
.xuanxiang span:nth-child(5){
  transform: rotate(120deg);
}
.xuanxiang span:nth-child(6){
  transform: rotate(150deg);
}
.xuanxiang span:nth-child(7){
  transform: rotate(180deg);
}
.xuanxiang span:nth-child(8){
  transform: rotate(210deg);
}
.xuanxiang span:nth-child(9){
  transform: rotate(240deg);
}
.xuanxiang span:nth-child(10){
  transform: rotate(270deg);
}
.xuanxiang span:nth-child(11){
  transform: rotate(300deg);
}
.xuanxiang span:nth-child(12){
  transform: rotate(330deg);
}

.xuanxiang span:nth-child(2n-1)::before{
border-top-color: #fcc;
}
.xuanxiang span:nth-child(2n)::before{
border-top-color: #ffc;
}
.xuanxiang span i{
  display:block;
  font-style: normal;
  font-weight: bold;
  color: #f35;
  position: absolute;
  left:calc(50% - 8px);
  top: 2%;
  width: 16px;
  font-size:16px;
}
@keyframes turn {
  0%{transform: rotate(0deg);}
  100%{transform: rotate(1080deg);}
}
@keyframes turn1 {
  0%{transform: rotate(0deg);}
  100%{transform: rotate(60deg);}
}
@keyframes turn2 {
  0%{transform: rotate(0deg);}
  100%{transform: rotate(120deg);}
}
@keyframes turn3 {
  0%{transform: rotate(0deg);}
  100%{transform: rotate(180deg);}
}
@keyframes turn4 {
  0%{transform: rotate(0deg);}
  100%{transform: rotate(240deg);}
}
@keyframes turn5 {
  0%{transform: rotate(0deg);}
  100%{transform: rotate(300deg);}
}
@keyframes turn6 {
  0%{transform: rotate(0deg);}
  100%{transform: rotate(300deg);}
}
/* 中心部位 */
.nei{
  width: 34%;
  height: 34%;
  position: absolute;
  top: 33%;
  left: 33%;
  border-radius: 100%;
  background-color: #ffbf81;
  cursor:pointer;
  z-index: 3;
}

.nei span{
  display:block;
  width: 100%;
  padding-top: 20px;
  color: #f35;
  font-size: 32px;
  text-align: center;
    transition: .3s;
}
.nei:hover span{
  color: #fff;
  transition: .3s;
}
/* 选项锚 */
.mao{
  width: 80%;
  height: 80%;
  position: absolute;
  top: 8%;
  left: 10%;
  text-align: center;
  z-index: 2;
}
.mao::before{
  content: '';
  display: inline-block;
  border: 10px solid transparent;
  border-top:18px solid #69f;

}