zoom and shake
This commit is contained in:
20
styles.css
20
styles.css
@@ -287,6 +287,26 @@ body {
|
||||
border: 3px solid var(--gold);
|
||||
box-shadow: 0 0 30px rgba(255, 158, 0, 0.5),
|
||||
inset 0 0 40px rgba(0, 0, 0, 0.6);
|
||||
transform-origin: center center;
|
||||
transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease;
|
||||
}
|
||||
/* zoom in avanti durante lo spin */
|
||||
.slot.zoom {
|
||||
transform: scale(1.14);
|
||||
box-shadow: 0 0 70px rgba(255, 158, 0, 0.85), 0 0 120px rgba(255, 46, 136, 0.35),
|
||||
inset 0 0 40px rgba(0, 0, 0, 0.6);
|
||||
z-index: 20;
|
||||
}
|
||||
/* tremolio mantenendo lo zoom (le keyframe tengono scale(1.14)) */
|
||||
.slot.zoom.shake {
|
||||
animation: slotShake 0.22s linear infinite;
|
||||
}
|
||||
@keyframes slotShake {
|
||||
0%, 100% { transform: scale(1.14) translate(0, 0) rotate(0deg); }
|
||||
20% { transform: scale(1.14) translate(-7px, 4px) rotate(-0.5deg); }
|
||||
40% { transform: scale(1.14) translate(7px, -5px) rotate(0.5deg); }
|
||||
60% { transform: scale(1.14) translate(-5px, 6px) rotate(-0.4deg); }
|
||||
80% { transform: scale(1.14) translate(6px, -4px) rotate(0.4deg); }
|
||||
}
|
||||
.slot-side {
|
||||
width: 46px;
|
||||
|
||||
Reference in New Issue
Block a user