css制作转盘
使用CSS制作转盘
基本结构
HTML部分需要创建一个容器和转盘元素，转盘内部可以添加多个扇形区域。
<div class="wheel-container">
<div class="wheel">
<div class="section" style="--i:1; --clr:#ff0;"></div>
<div class="section" style="--i:2; --clr:#f0f;"></div>
<div class="section" style="--i:3; --clr:#0ff;"></div>
<div class="section" style="--i:4; --clr:#f00;"></div>
<div class="section" style="--i:5; --clr:#0f0;"></div>
<div class="section" style="--i:6; --clr:#00f;"></div>
</div>
</div>CSS样式
使用CSS变量控制每个扇区的颜色和位置，通过transform实现旋转效果。
.wheel-container {
position: relative;
width: 300px;
height: 300px;
margin: 50px auto;
}
.wheel {
position: relative;
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
transition: transform 5s cubic-bezier(0.17, 0.85, 0.43, 1);
}
.section {
position: absolute;
width: 50%;
height: 50%;
background: var(--clr);
transform-origin: bottom right;
transform: rotate(calc(60deg * var(--i)));
clip-path: polygon(0 0, 100% 0, 100% 100%);
}添加指针
在转盘中心添加一个指针元素，用于指示旋转结果。
.wheel::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
background: #fff;
border-radius: 50%;
z-index: 10;
box-shadow: 0 0 5px rgba(0,0,0,0.5);
}
.wheel-container::before {
content: '▲';
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%);
font-size: 30px;
color: #fff;
z-index: 10;
text-shadow: 0 0 5px rgba(0,0,0,0.5);
}旋转动画
通过JavaScript添加旋转功能，点击时随机旋转转盘。
const wheel = document.querySelector('.wheel');
wheel.addEventListener('click', () => {
const randomDegree = Math.floor(Math.random() * 360) + 1440; // 4圈+随机角度
wheel.style.transform = `rotate(${randomDegree}deg)`;
});响应式调整
添加媒体查询确保转盘在不同设备上显示正常。
@media (max-width: 500px) {
.wheel-container {
width: 200px;
height: 200px;
}
}注意事项
- 扇形数量应与CSS中的旋转角度计算一致（360度/扇形数量）
- 使用CSS变量(--i, --clr)可以方便地修改每个扇区的样式
- 旋转动画的持续时间(cubic-bezier)可以调整以获得不同的旋转效果
- 确保指针元素始终位于转盘上方(z-index)
