Игровой автомат
body {
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.slot-machine {
position: relative;
width: 300px;
height: 150px;
background-color: #ffd700;
border-radius: 10px;
overflow: hidden;
}
.reel {
position: absolute;
width: 100px;
height: 100%;
background-color: #fff;
border: 1px solid #000;
font-size: 50px;
text-align: center;
line-height: 150px;
transition: transform 1s ease-in-out;
}
.reel1 {
left: 0;
}
.reel2 {
left: 100px;
}
.reel3 {
left: 200px;
}
.handle {
position: absolute;
top: 0;
right: -50px;
width: 50px;
height: 150px;
background-color: #ffd700;
border-radius: 0 10px 10px 0;
cursor: pointer;
}
.handle::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
background-color: #ff0000;
border-radius: 50%;
}
body {
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.slot-machine {
position: relative;
width: 300px;
height: 150px;
background-color: #ffd700;
border-radius: 10px;
overflow: hidden;
}
.reel {
position: absolute;
width: 100px;
height: 100%;
background-color: #fff;
border: 1px solid #000;
font-size: 50px;
text-align: center;
line-height: 150px;
transition: transform 1s ease-in-out;
}
.reel1 {
left: 0;
}
.reel2 {
left: 100px;
}
.reel3 {
left: 200px;
}
.handle {
position: absolute;
top: 0;
right: -50px;
width: 50px;
height: 150px;
background-color: #ffd700;
border-radius: 0 10px 10px 0;
cursor: pointer;
}
.handle::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
background-color: #ff0000;
border-radius: 50%;
}