当前位置：首页 > CSS

css制作抽奖

2026-02-13 04:03:05CSS

使用CSS制作抽奖效果

抽奖效果通常包含旋转动画和视觉吸引元素，以下是一种实现方式：

HTML结构

<div class="lottery-wheel">
  <div class="wheel"></div>
  <button class="spin-btn">开始抽奖</button>
</div>

CSS动画样式

.lottery-wheel {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 0 auto;
}

.wheel {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(
    red, orange, yellow, green, blue, indigo, violet
  );
  transition: transform 3s cubic-bezier(0.17, 0.67, 0.12, 0.99);
}

.spin-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px 20px;
  background: #333;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.spin-btn:hover {
  background: #555;
}

JavaScript控制逻辑

const wheel = document.querySelector('.wheel');
const spinBtn = document.querySelector('.spin-btn');

spinBtn.addEventListener('click', () => {
  const randomRotation = Math.floor(Math.random() * 360) + 3600;
  wheel.style.transform = `rotate(${randomRotation}deg)`;
});

添加指针指示器

在抽奖轮盘上方添加指针元素：

.lottery-wheel::before {
  content: '';
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 30px solid #333;
  z-index: 10;
}

分段奖品展示

修改轮盘样式以显示具体奖品：

.wheel {
  /* 替换之前的background */
  background: white;
  position: relative;
  overflow: hidden;
}

.wheel::before {
  content: '';
  position: absolute;
  width: 50%;
  height: 50%;
  background: conic-gradient(
    #ff0000 0% 16.6%,
    #ff9900 16.6% 33.3%,
    #ffff00 33.3% 50%,
    #00ff00 50% 66.6%,
    #0000ff 66.6% 83.3%,
    #9900ff 83.3% 100%
  );
  border-radius: 50%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.prize-label {
  position: absolute;
  width: 50px;
  text-align: center;
  transform-origin: 0 0;
  font-weight: bold;
}

响应式设计调整

添加媒体查询确保在不同设备上正常显示：

@media (max-width: 600px) {
  .lottery-wheel {
    width: 250px;
    height: 250px;
  }

  .wheel::before {
    width: 60%;
    height: 60%;
  }
}

性能优化建议

使用will-change属性提升动画性能：

.wheel {
  will-change: transform;
}

考虑添加减速动画效果：

wheel.style.transition = 'transform 4s cubic-bezier(0.2, 0.8, 0.3, 1)';

无障碍访问增强

为屏幕阅读器添加ARIA属性：

<div class="lottery-wheel" role="application" aria-label="抽奖转盘">
  <div class="wheel" aria-live="polite"></div>
  <button class="spin-btn" aria-label="开始旋转抽奖">开始抽奖</button>
</div>

css制作抽奖