CSS技術(shù)可用于創(chuàng)建各種動(dòng)畫(huà)效果，包括老虎機(jī)，下面介紹如何使用CSS來(lái)實(shí)現(xiàn)老虎機(jī)效果。

<code>HTML代碼：
<div class="slot-machine">
<div class="reel">
<img src="img/1.png">
<img src="img/2.png">
<img src="img/3.png">
</div>
<div class="reel">
<img src="img/4.png">
<img src="img/5.png">
<img src="img/6.png">
</div>
<div class="reel">
<img src="img/7.png">
<img src="img/8.png">
<img src="img/9.png">
</div>
<button class="spin-button">SPIN</button>
</div>
CSS代碼：
.slot-machine {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
}
.reel {
position: relative;
margin: 0 20px;
}
.reel img {
position: absolute;
top: 0;
transition: top 1s;
}
.spin-button {
padding: 10px 20px;
background-color: #0066FF;
color: white;
font-size: 20px;
border: none;
cursor: pointer;
}
.spin-button:hover {
background-color: #0044BB;
}
JS代碼：
const reels = document.querySelectorAll(".reel");
const spinButton = document.querySelector(".spin-button");
spinButton.addEventListener("click", () => {
reels.forEach((reel) => {
const randomValue = Math.floor(Math.random() * 3);
const newPosition = -100 * randomValue;
reel.querySelector("img").style.top = <code>${newPosition}%</code>;
});
});</code>

實(shí)現(xiàn)老虎機(jī)效果的主要思路是通過(guò)JS控制圖片的位置變化，CSS主要負(fù)責(zé)制作動(dòng)畫(huà)效果和布局。以上代碼實(shí)現(xiàn)了三個(gè)帶有不同圖片的容器，每個(gè)容器內(nèi)均有三張圖片，點(diǎn)擊"SPIN"按鈕后，通過(guò)JS生成隨機(jī)值，控制每個(gè)容器內(nèi)的圖片位置，實(shí)現(xiàn)轉(zhuǎn)動(dòng)效果。