css制作转盘

2026-04-01 12:35:24CSS

使用CSS制作转盘

基础结构

HTML部分需要创建一个容器和转盘元素。转盘通常由多个扇形区域组成，每个区域代表一个选项。

<div class="wheel-container">
  <div class="wheel">
    <div class="wheel-item" style="--i:1; --clr:#ff0000;">选项1</div>
    <div class="wheel-item" style="--i:2; --clr:#00ff00;">选项2</div>
    <div class="wheel-item" style="--i:3; --clr:#0000ff;">选项3</div>
    <div class="wheel-item" style="--i:4; --clr:#ffff00;">选项4</div>
    <div class="wheel-item" style="--i:5; --clr:#ff00ff;">选项5</div>
    <div class="wheel-item" style="--i:6; --clr:#00ffff;">选项6</div>
  </div>
  <div class="pointer"></div>
</div>

CSS样式

使用CSS变量和transform属性创建扇形布局。关键点包括圆形布局、扇形角度计算和旋转动画。

css制作转盘

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

.wheel {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  transition: transform 4s cubic-bezier(0.17, 0.67, 0.12, 0.99);
  transform: rotate(0deg);
}

.wheel-item {
  position: absolute;
  width: 50%;
  height: 50%;
  transform-origin: bottom right;
  transform: rotate(calc(60deg * var(--i)));
  background: var(--clr);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
}

.pointer {
  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;
}

添加旋转动画

通过JavaScript触发旋转动画，计算随机停止位置。

css制作转盘

const wheel = document.querySelector('.wheel');
const spinBtn = document.createElement('button');
spinBtn.textContent = '旋转';
document.body.appendChild(spinBtn);

spinBtn.addEventListener('click', () => {
  const randomDegree = Math.floor(Math.random() * 360) + 1440; // 4圈+随机角度
  wheel.style.transform = `rotate(${-randomDegree}deg)`;
});

响应式调整

为适应不同屏幕尺寸，添加媒体查询调整转盘大小。

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

高级效果增强

添加阴影和过渡效果使转盘更逼真。

.wheel {
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
  border: 5px solid #333;
}

.wheel-item {
  transition: all 0.3s ease;
}

.wheel-item:hover {
  opacity: 0.9;
  transform: rotate(calc(60deg * var(--i))) scale(1.05);
}

通过以上步骤可以创建一个功能完整的CSS转盘。扇形数量可通过调整CSS变量和角度计算来修改，旋转动画的持续时间和缓动函数可根据需求调整。