CSS實現下雪

/* 雪花落下動畫 */
@keyframes snow{
0%{
transform: translateY(-10%);
opacity: 0;
}
50%{
opacity: 1;
}
100%{
transform: translateY(100%);
opacity: 0;
}
}
/* 容器div */
.snow-container{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
overflow: hidden;
}
/* 雪花div */
.snow{
position: absolute;
top: 0;
left: -5px;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: white;
box-shadow: 0 0 2px white,0 0 10px white;
animation: snow 10s linear infinite;
}

抽獎轉盤

/* 容器div */
.rotate-container{
position: relative;
margin: 100px auto;
width: 400px;
height: 400px;
border-radius: 50%;
overflow: hidden;
}
/* 轉盤div */
.rotate{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
border: 10px solid #ccc;
border-radius: 50%;
padding: 20px;
text-align: center;
font-size: 24px;
font-weight: bold;
letter-spacing: 3px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transition: transform 10s cubic-bezier(0.2,0.7,0.1,1);
}
/* 選項div */
.option{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
border-radius: 50%;
overflow: hidden;
transform: rotate(calc(360deg / 8 * var(--i)));
}
/* 選項div內部 */
.option >div{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
transform: rotate(calc(360deg / 8 * -var(--i)));
}