css实现转盘抽奖 |css3 position fixed

字符化css，cc 怎么插入css，css怎么让表格并排，网页简答题 css，css 可以截取文字显示吗，css3 移动 原来位置，css3 position fixed

.prize-wheel {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 300px;
border: 10px solid #f1f1f1;
border-radius: 50%;
background: #fefefe;
}
.spin {
animation-name: spin;
animation-duration: 3s;
animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
animation-iteration-count: 1;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.prize {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
width: 60px;
height: 60px;
border-radius: 50%;
background: #ff3300;
color: #fff;
font-size: 18px;
text-align: center;
transform-origin: 50% 200px;
}
.prize-1 {
transform: rotate(30deg);
}
.prize-2 {
transform: rotate(60deg);
}
.prize-3 {
transform: rotate(90deg);
}
.prize-4 {
transform: rotate(120deg);
}
.prize-5 {
transform: rotate(150deg);
}
.prize-6 {
transform: rotate(180deg);
}
.prize-7 {
transform: rotate(210deg);
}
.prize-8 {
transform: rotate(240deg);
}
.prize-9 {
transform: rotate(270deg);
}
.prize-10 {
transform: rotate(300deg);
}
.prize-11 {
transform: rotate(330deg);
}
.btn {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 40px;
border-radius: 20px;
background: #ff3300;
color: #fff;
text-align: center;
line-height: 40px;
cursor: pointer;
}

首先，大家需要一个容器来包裹整个“转盘”，用

来表示。

转盘上有几个奖品，每个奖品需要对应一个

样式，其中prize-1的数字对应每个奖品的位置。

接下来，大家需要一个按钮来触发“抽奖”效果。用

来表示。

最后，使用animation和transform属性来完成旋转效果，点击按钮时改变类名来触发“抽奖”效果。