conic-gradient可纯css实现平滑无缝环形色带，适合转盘抽奖背景；语法为conic-gradient(from角度,颜色1起始,颜色1结束,颜色2起始…)；8等分示例从90deg开始，每段12.5%硬过渡；配合rotate动画与js角度计算实现抽奖逻辑；需注意safari兼容性及真机渲染优化。
直接用 conic-gradient 就能画出平滑过渡、首尾无缝的环形色带，特别适合转盘抽奖背景——不用图片、不依赖 JS 绘图，纯 CSS 就能搞定高饱和度、多分段、可响应的彩色圆盘。
基础语法：从中心出发，按角度切分颜色
conic-gradient 的起点是元素中心，颜色沿顺时针方向按角度分布。关键写法：
- 格式：
conic-gradient(from <strong>角度</strong>, <strong>颜色1</strong> <strong>起始位置</strong>, <strong>颜色2</strong> <strong>结束位置</strong>, ...) - 角度默认为
0deg（指向正右方），加from 90deg可让红色从正上方开始（更符合转盘直觉） - 每段颜色建议用「硬性过渡」：比如
red 0%, red 25%, orange 25%, orange 50%，避免模糊边界
实现 8 等分彩虹转盘（含文字区留白）
抽奖转盘常需清晰扇区 + 中心文字/按钮。可用 conic-gradient 配合伪元素或额外容器分层处理：
- 主背景层（
.wheel-bg）：8 色等分，每份占12.5%（即360° ÷ 8） - CSS 示例：
.wheel-bg { background: conic-gradient( from 90deg, #ff416c 0%, #ff416c 12.5%, #ff4b2b 12.5%, #ff4b2b 25%, #feca57 25%, #feca57 37.5%, #48dbfb 37.5%, #48dbfb 50%, #1dd1a1 50%, #1dd1a1 62.5%, #5f27cd 62.5%, #5f27cd 75%, #ee5a24 75%, #ee5a24 87.5%, #00d2d3 87.5%, #00d2d3 100% ); border-radius: 50%; } - 若需中心镂空（如放「开始」按钮），给父容器设
padding或用radial-gradient叠加遮罩，更轻量
适配旋转动画与交互状态
转盘转动靠 transform: rotate()，但要注意：背景本身不转，动的是整个容器；色彩渐变只是静态底图。
- 抽奖动画示例（转 5 圈 + 随机偏移停在某区）：
.wheel-spin { animation: spin 3.5s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes spin { from { transform: rotate(0turn); } to { transform: rotate(5.375turn); } /* 5圈 + 停在第3区（0.375 = 3/8） */ } - 停转后可通过 JS 计算最终角度，反推中奖区域（例如
Math.floor((angle % 360) / 45)对应 8 分区索引） - 禁用期间加
pointer-events: none，防止重复点击
兼容性兜底和真机优化
conic-gradient 在 Chrome 69+、Firefox 83+、Safari 15.4+ 原生支持；旧版 Safari 需前缀或降级方案：
- 加 WebKit 前缀（仅 Safari 早期）：
-webkit-conic-gradient(...) - 降级方案：用
linear-gradient拼接 +clip-path: circle()裁剪，或输出 SVG 背景图 - 真机注意：iOS Safari 渲染大尺寸 conic-gradient 可能偶发闪烁，建议控制容器宽高 ≤ 500px，或启用硬件加速：
transform: translateZ(0)
