在我們日常生活中，很多時候我們需要使用到網頁設計，而網頁設計中一個重要的組成部分就是CSS（層疊樣式表），今天我們來探究一種有趣的CSS應用--扭蛋機！

.gachapon {
position: relative;
display: block;
margin: 0 auto;
width: 350px;
height: 600px;
background-color: #f5f5f5;
border: 5px solid #ccc;
border-radius: 10px;
overflow: hidden;
}
.ball {
position: absolute;
top: -200px;
left: calc(50% - 50px);
width: 100px;
height: 100px;
border-radius: 100px;
background-color: #d80931;
color: #fff;
font-size: 60px;
text-align: center;
line-height: 100px;
cursor: pointer;
animation: fall 3s ease-in-out;
}
@keyframes fall {
0% {
top: -200px;
}
70% {
top: 100px;
}
80% {
top: 50px;
}
90% {
top: 70px;
}
100% {
top: 60vh;
}
}

以上代碼實現了一個簡單的扭蛋機的效果，扭蛋機外的div使用了relative定位來固定它的位置，扭蛋機內小球的位置是通過絕對定位來實現的。border-radius實現了扭蛋機球的圓形效果，overflow:hidden則能防止小球位置超出扭蛋機的范圍。

Keyframes則是控制小球運動過程中的動畫效果。球的移動從頂部開始，逐漸加速，最后落到指定位置，bounce等效果代表球在位置上反彈了幾次，讓整個運動更加自然。

總結起來，CSS扭蛋機可謂是CSS創意應用的體現，通過CSS和動畫效果來實現有趣的效果，我們可以通過更多的實踐和試驗，甚至可以實現更加復雜、精致的扭蛋機效果，期待更多關于CSS的創新想法！