css做一个抽奖 |css 图片的倒影

/* 定义抽奖转盘的样式 */
.lucky-draw {
width: 400px;
height: 400px;
background-color: #f2f2f2;
border-radius: 50%;
position: relative;
}
/* 定义转盘上的奖品 */
.lucky-draw .prize {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #fff;
box-shadow: 0px 0px 10px #f2f2f2;
text-align: center;
line-height: 200px;
font-size: 24px;
}
/* 定义指针的样式 */
.lucky-pointer {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 12px;
height: 120px;
background-color: red;
border-radius: 10px;
transform-origin: bottom;
transition: all 5s ease-out;
}
/* 定义指针旋转动画 */
.lucky-pointer.rotate {
transform: translate(-50%, -50%) rotate(720deg);
}

上面的代码定义了抽奖转盘的样式、奖品样式和指针样式。接下来，大家需要用JavaScript来触发抽奖。

// 获取DOM节点
const luckyDraw = document.querySelector('.lucky-draw');
const pointer = document.querySelector('.lucky-pointer');
// 定义指针旋转角度
const angles = [0, 45, 90, 135, 180, 225, 270, 315];
// 点击按钮触发抽奖
document.querySelector('button').addEventListener('click', () =>{
// 随机生成抽奖结果
const index = Math.floor(Math.random() * angles.length);
const angle = angles[index];
// 触发指针旋转动画
pointer.classList.add('rotate');
// 设置延时，模拟指针旋转结束后弹出奖品的效果
setTimeout(() =>{
alert(`恭喜您获得了${index + 1}等奖！`);
// 移除指针旋转样式，为下一次抽奖做准备
pointer.classList.remove('rotate');
}, 5000);
});

上面的代码分别获取了抽奖转盘和指针的DOM节点，并定义了几个角度。当用户点击抽奖按钮时，随机生成一个角度，并触发指针旋转动画。等指针旋转动画结束后，弹出获奖提示，并移除指针旋转样式，为下一次抽奖做准备。

这样，一个简单的抽奖UI就完成了。当然，如果你想要实现更高级的效果，比如CSS3动画，可以尝试更多的CSS技巧。