js+svg实现一个大转盘抽奖效果代码-html代码-BFW代码库

代码语言：html
所属分类：大转盘
代码描述：js+svg实现一个大转盘抽奖效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">


  
<style>
@import url("https://fonts.googleapis.com/css2?family=Girassol&display=swap");

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  display: grid;
  place-items: center;
  overflow: hidden;
}

.deal-wheel {
  --size: clamp(250px, 80vmin, 700px);
  --lg-hs: 0 3%;
  --lg-stop: 50%;
  --lg: linear-gradient(
      hsl(var(--lg-hs) 0%) 0 var(--lg-stop),
      hsl(var(--lg-hs) 20%) var(--lg-stop) 100%
    );
  
  position: relative;
  display: grid;
  grid-gap: calc(var(--size) / 20);
  align-items: center;
  grid-template-areas:
    "spinner"
    "trigger";
  font-family: "Girassol", sans-serif;
  font-size: calc(var(--size) / 21);
  line-height: 1;
  text-transform: lowercase;
}

.deal-wheel > * {
  grid-area: spinner;
}

.deal-wheel .btn-spin {
  grid-area: trigger;
  justify-self: center;
}

.spinner {
  position: relative;
  display: grid;
  align-items: center;
  grid-template-areas: "spinner";
  width: var(--size);
  height: var(--size);
  transform: rotate(calc(var(--rotate, 25) * 1deg));
  border-radius: 50%;
  box-shadow: inset 0 0 0 calc(var(--size) / 40) hsl(0deg 0% 0% / 0.06);
}

.spinner * {
  grid-area: spinner;
}

.prize {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 calc(var(--size) / 6) 0 calc(var(--size) / 20);
  width: 50%;
  height: 50%;
  transform-origin: center right;
  transform: rotate(var(--rotate));
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.cap {
  --cap-size: calc(var(--size) / 4);
  position: relative;
  justify-self: center;
  width: var(--cap-size);
  height: var(--cap-size);
}

/* Hide select dropdown from SVG import file */
.cap select {
  display: none;
}

.cap svg {
  width: 100%;
}

.ticker {
  position: relative;
  left: calc(var(--size) / -15);
  width: calc(var(--size) / 10);
  height: calc(var(--size) / 20);
  background: var(--lg);
  z-index: 1;
  -webkit-clip-path: polygon(20% 0, 100% 50%, 20% 100%, 0% 50%);
          clip-path: polygon(20% 0, 100% 50%, 20% 100%, 0% 50%);
  transform-origin: center left;
}

.btn-spin {
  color: hsl(0deg 0% 100%);
  background: var(--lg);
  border: none;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  text-transform: inherit;
  padding: 0.9rem 2rem 1rem;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: opacity 200ms ease-out;
}

.btn-spin:focus {
  outline-offset: 2px;
}

.btn-spin:active {
  transform: translateY(1px);
}

.btn-spin:disabled {
  cursor: progress;
  opacity: 0.25;
}

/* Spinning animation */
.is-spinning .spinner {
  transition: transform 8s cubic-bezier(0.1, -0.01, 0, 1);
}

.is-spinning .ticker {
  -webkit-animation: tick 700ms cubic-bezier(0.34, 1.56, 0.64, 1);
          animation: tick 700ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@-webkit-keyframes tick {
  40% {
    transform: rotate(-12deg);
  }
}

@keyframes tick {
  40% {
    transform: rotate(-12deg);
  }
}

/* Selected prize animation */
.prize.selected .text {
  color: white;
  -webkit-animation: selected 800ms ease;
          animation: selected 800ms ease;
}

@-webkit-keyframes selected {
  25% {
    transform: scale(1.25);
    text-shadow: 1vmin 1vmin 0 hsla(0 0% 0% / 0.1);
  }
  40% {
    transform: scale(0.92);
    text-shadow: 0 0 0 hsla(0 0% 0% / 0.2);
  }
  60% {
    transform: scale(1.02);
    text-shadow: 0.5vmin 0.5vmin 0 hsla(0 0% 0% / 0.1);
  }
  75% {
    transform: scale(0.98);
  }
  85% {
    transform: scale(1);
  }
}

@keyframes selected {
  25% {
    transform: scale(1.25);
    text-shadow: 1vmin 1vmin 0 hsla(0 0% 0% / 0.1);
  }
  40% {
    transform: scale(0.92);
    text-shadow: 0 0 0 hsla(0 0% 0% / 0.2);
  }
  60% {
    transform: scale(1.02);
    text-shadow: 0.5vmin 0.5vmin 0 hsla(0 0% 0% / 0.1);
  }
  75% {
    transform: scale(0.98);
  }
  85% {
    transform: scale(1);
  }
}
</style>


</head>

<body >
  <div class="deal-wheel">
  <ul class="spinner"></ul>
  <figure class="cap">
    <!-- Grim reaper SVG import -->
    <select id="select-reaction" class="select">
      <option value="resting">resting</option>
      <option value="dancing">dancing</option>
      <option value="laughing">laughing</option>
      <option value="shocked">shocked</option>
    </select>
    
    <svg class="grim-reaper" data-reaction="resting" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 582 653">
      <defs>
        <clipPath id="clip-path">
          <circle class="cls-1" cx="295.6" cy="286.3" r="286.3" />
        </clipPath>
        <clipPath id="clip-path-2">
          <path class="cls-1" d="M460 250c0 130-126 222-151 209-39-22-194-110-194-239S280 54 356 54c33 1 104 66 104 196z" />
        </clipPath>
        <clipPath id="clip-path-3">
          <path class="cls-1" d="M122 426l-100 7s28 161 167 156c37-2 69-27 66-31s-28 13-71-13c-58-35-62-119-62-119z" />
        </clipPath>
        <style>
          .cls-1,
          .cls-17 {
            fill: none
          }
    
          .cls-4 {
            fill: #141414
          }
    
          .cls-5 {
            fill: #111010
          }
    
          .cls-6 {
            fill: #fff
          }
    
          .cls-7 {
            fill: #5c382b
          }
    
          .cls-9 {
            fill: #232323
          }
    
          .cls-15 {
            fill: #2d221e
          }
    
          .cls-16 {
            fill: #4f2610;
            opacity: .6;
          }
    
          .cls-17 {
            stroke: #9b8029;
            stroke-miterlimit: 10;
            stroke-width: 2.5px
          }
    
          .cls-18 {
            fill: #a7a9ad
          }
    
          .cls-20 {
            fill: #fafafa
          }
        </style>
      </defs>
      <circle id="BG" cx="295.6" cy="286.3" r="286.3" fill="#960b0a" />
      <g data-animate="body">
        <g id="ROBE">
          <path class="cls-4" d="M489 371s-9-1-18 6c-15 12-35 38-35 38l46 58s0-8-4-22c-4-15-5-58 2-73 2-5 9-7 9-7z" />
          <path class="cls-5" d="M483 487c-3 0-8-1-5-26 1-6-3-14-4-43-2-48 15-47 15-47s22-2 2 59c-11 32-5 57-8 57zM168 464c0 37-27 67-27 67s-34-30-49-64c-9-21-12-65-2-68 34-11 78 28 78 65z" />
        </g>
        <g id="LEFT_ARM">
          <path class="cls-6" d="M473 440l-2-1a1 1 0 010-1l5-24 7-26a1 1 0 011-1l3 1a1 1 0 010 1 133 133 0 00-9 25 171 171 0 00-4 25l-1 1z" />
          <path class="cls-6" d="M472 439l2 1a1 1 0 001-1l8-24 8-25a1 1 0 00-1-1l-3-1a1 1 0 00-1 1 132 132 0 01-5 26 170 170 0 01-9 23v1z" />
        </g>
        <g id="RIGHT_ARM">
          <path class="cls-6" d="M177 521l5-3a2 2 0 000-2l-22-49-27-49a2 2 0 00-2-1l-6 3a2 2 0 000 2c11 15 22 31 30 47a362 362 0 0120 50l2 2z" />
          <path class="cls-6" d="M180 518l-5 3a2 2 0 01-2-1l-28-46-26-49a2 2 0 010-3l6-3a2 2 0 012 1c6 18 13 35 23 51a363 363 0 0030 45v2z" />
        </g>
        <path id="SCYTHE-SNATH" class="cls-7" d="M22 433l493-45a6 6 0 016 3 6 6 0 01-5 8L27 455z" />
      </g>
      <g clip-path="url(#clip-path)" id="ROBE-BOTTOM-CLIP-PATH">
        <g data-animate="body" id="ROBE-BOTTOM">
          <path class="cls-4" d="M478 479c0-8 1-27-1-34-3-9 1-42 1-42l-36 4-6 8s-9 4-39-12c-20-10-70 52-70 52s74 93 105 90c6-1 21-1 16-10-4-7 11-37 30-44 4-1 5-3 6-6 0 0-6 4-6-6z" />
          <path class="cls-9" d="M381 396c-18-20-50-3-85-11-25-5-36 4-41 21l-14 1c-20 3-39 30-49 48l-13-18-37 5s8 19 4 35c-8 32 8 73 8 73h30v10h18c-24 28 51 22 108 22 61 0 110 13 116-7 17-50-3-133-45-179z" />
        </g>
      </g>
      <g data-animate="body">
        <path id="HOOD" class="cls-5" d="M460 250c0 130-126 222-151 209-39-22-194-110-194-239S280 54 356 54c33 1 104 66 104 196z" />
        <g id="TIE" clip-path="url(#clip-path-2)">
          <path d="M352 431a120 120 0 00-17-38 19 19 0 009-18c-1-10-40-4-39 6 2 9 10 15 19 15-1 9-4 24-7 33-4 12-21 30-21 30l25 55a4 4 0 007 2l25-31s5-29-1-54z" fill="#da193f" />
          <path d="M301 460s13 1 35-13a47 47 0 0016-16 59 59 0 012 14l1 16z" fill="#bc0f39" />
        </g>
        <g id="SCYTHE-2">
          <path class="cls-18" d="M122 426l-100 7s28 161 167 156c37-2 69-27 66-31s-28 13-71-13c-58-35-62-119-62-119z" />
          <g clip-path="url(#clip-path-3)">
            <path class="cls-20" d="M116 588l-32 7 44-142 32-7-44 142zM133 595l-8 2 44-142 8-2-44 142z" />
            <path d="M255 558s-50 29-108-1c-64-34-72-113-72-113" stroke="#969799" stroke-miterlimit="10" stroke-width="2.5" fill="none" />
          </g>
          <path class="cls-7" d="M10 434l121-10 4 18-123 13a11 11 0 01-12-8 11 11 0 0110-13z" />
        </g>
        <g id="KEY">
          <path d="M244 570a26 26 0 011 4 30 30 0 01-3 17c-2 5-7 9-12 9a14 14 0 01-1 1c-5 0-9-3-13-6a30 30 0 01-7-17c-1-13 5-22 15-24 8-1 12 3 16 5a33 33 0 01-5 1h-5c-9-3-15 8-14 18a23 23 0 005 12c3 3 6 4 8 4s6-3 7-6c2-4 3-9 2-14z" fill="#9b8029" />
          <path class="cls-18" d="M210 619h13v32h.........完整代码请登录后点击上方下载按钮下载查看