html js css带指针抽奖大转盘

好的，下面是一个简单的 HTML、CSS、JS 实现的带指针抽奖大转盘：

HTML：

<div class="container">
  <div class="wheel">
    <div class="section"><span>1</span></div>
    <div class="section"><span>2</span></div>
    <div class="section"><span>3</span></div>
    <div class="section"><span>4</span></div>
    <div class="section"><span>5</span></div>
    <div class="section"><span>6</span></div>
    <div class="section"><span>7</span></div>
    <div class="section"><span>8</span></div>
  </div>
  <div class="pointer"></div>
</div>
<button class="btn" onclick="spin()">抽奖</button>

CSS：

.container {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 50px auto;
}

.wheel {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  transform-style: preserve-3d;
  animation: spin 5s ease-out forwards;
}

.section {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-origin: 50% 100%;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  background-color: #f7c4d8;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.section:nth-child(1) {
  transform: rotate(0deg);
}
.section:nth-child(2) {
  transform: rotate(45deg);
}
.section:nth-child(3) {
  transform: rotate(90deg);
}
.section:nth-child(4) {
  transform: rotate(135deg);
}
.section:nth-child(5) {
  transform: rotate(180deg);
}
.section:nth-child(6) {
  transform: rotate(225deg);
}
.section:nth-child(7) {
  transform: rotate(270deg);
}
.section:nth-child(8) {
  transform: rotate(315deg);
}

.section span {
  display: block;
  margin-top: 50%;
  transform: translateY(-50%);
}

.pointer {
  position: absolute;
  top: 0;
  left: 50%;
  width: 5px;
  height: 100%;
  background-color: red;
  transform-origin: 50% 0%;
  transform: translateX(-50%);
}

.btn {
  display: block;
  margin: 20px auto;
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  border-radius: 10px;
  background-color: #f7c4d8;
  color: #fff;
  cursor: pointer;
}

@keyframes spin {
  to {
    transform: rotate(2160deg);
  }
}

JS：

const wheel = document.querySelector('.wheel');
const pointer = document.querySelector('.pointer');
const btn = document.querySelector('.btn');

function spin() {
  // 随机旋转角度
  const angle = Math.floor(Math.random() * 360) + 360 * 5;
  wheel.style.transform = `rotate(${angle}deg)`;
}

// 监听动画结束事件
wheel.addEventListener('animationend', () => {
  // 获取当前旋转角度
  const angle = getComputedStyle(wheel).transform;
  const match = angle.match(/matrix\((.*)\)/);
  const values = match ? match[1].split(', ') : [];
  const a = values[0];
  const b = values[1];
  const c = values[2];
  const d = values[3];
  const radians = Math.atan2(b, a);
  const degrees = radians * (180 / Math.PI);
  const angleDeg = degrees < 0 ? degrees + 360 : degrees;
  // 根据旋转角度计算指针角度
  pointer.style.transform = `rotate(${360 - angleDeg}deg)`;
});

btn.addEventListener('click', spin);

这个抽奖大转盘会随机旋转一定角度，并且在动画结束后根据旋转角度计算指针的角度。你只需要在 HTML 中添加需要的奖项，修改 CSS 样式，就可以自定义你的大转盘了。