css 制作抽奖指针
使用 CSS 制作抽奖指针
指针形状设计
通过 CSS 的 border 和 transform 属性可以创建一个三角形指针。设置 width 和 height 为 0，利用边框生成三角形效果：
.pointer {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 40px solid red;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}旋转动画实现
使用 @keyframes 定义旋转动画，通过 transform: rotate() 控制旋转角度。设置 animation-timing-function 为 ease-out 实现减速停止效果：
@keyframes spin {
0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(360deg); }
}
.spin-animation {
animation: spin 3s ease-out forwards;
}定位与层级控制
将指针容器设置为相对定位，确保指针居中显示。使用 z-index 控制指针始终位于转盘上方：
.pointer-container {
position: relative;
width: 100px;
height: 100px;
z-index: 10;
}交互触发设计
通过 JavaScript 动态添加/移除动画类名触发旋转。使用 transitionend 事件监听动画结束：
document.querySelector('.pointer').addEventListener('click', function() {
this.style.animation = 'none';
setTimeout(() => {
this.style.animation = 'spin 3s ease-out forwards';
}, 10);
});
document.querySelector('.pointer').addEventListener('animationend', function() {
console.log('抽奖结束');
});视觉效果优化
添加阴影和渐变提升立体感。使用 filter: drop-shadow() 替代 box-shadow 对透明部分生效：
.pointer {
filter: drop-shadow(0 0 5px rgba(0,0,0,0.3));
border-top-color: #ff4757;
transition: transform 0.3s;
}完整示例可通过 CodePen 等平台查看实际效果，调整边框宽度和旋转角度可获得不同形状的指针。对于更复杂的样式，可考虑使用 SVG 替代 CSS 绘制。
