2024-07-27 09:47:17 -05:00
|
|
|
@property --hue {
|
|
|
|
initial-value: 0;
|
|
|
|
inherits: false;
|
|
|
|
syntax: '<number>';
|
|
|
|
}
|
|
|
|
@property --opacity {
|
|
|
|
initial-value: 0;
|
|
|
|
inherits: false;
|
|
|
|
syntax: '<number>';
|
|
|
|
}
|
|
|
|
@property --scale {
|
|
|
|
initial-value: 0;
|
|
|
|
inherits: false;
|
|
|
|
syntax: '<number>';
|
|
|
|
}
|
|
|
|
@property --offsetX {
|
|
|
|
initial-value: 0;
|
|
|
|
inherits: false;
|
|
|
|
syntax: '<number>';
|
|
|
|
}
|
|
|
|
@property --offsetY {
|
|
|
|
initial-value: 0;
|
|
|
|
inherits: false;
|
|
|
|
syntax: '<number>';
|
|
|
|
}
|
|
|
|
@property --randomnessX {
|
|
|
|
initial-value: 0;
|
|
|
|
inherits: false;
|
|
|
|
syntax: '<number>';
|
|
|
|
}
|
|
|
|
@property --randomnessY {
|
|
|
|
initial-value: 0;
|
|
|
|
inherits: false;
|
|
|
|
syntax: '<number>';
|
|
|
|
}
|
|
|
|
|
2024-07-26 18:05:24 -05:00
|
|
|
.damage {
|
2024-07-27 09:47:17 -05:00
|
|
|
--hue: 0;
|
|
|
|
--opacity: 0.75;
|
|
|
|
--randomnessX: 0;
|
|
|
|
--randomnessY: 0;
|
|
|
|
--scale: 0.35;
|
|
|
|
--background: hsl(var(--hue) 100% 12.5%);
|
|
|
|
--foreground: hsl(var(--hue) 100% 50%);
|
|
|
|
animation:
|
|
|
|
fade 1.5s linear forwards,
|
|
|
|
grow 1.5s ease-in forwards,
|
|
|
|
move 1.5s cubic-bezier(0.5, 1, 0.89, 1),
|
|
|
|
shimmer 250ms infinite ease-in-out
|
|
|
|
;
|
|
|
|
color: var(--foreground);
|
|
|
|
font-size: calc(10px + (var(--magnitude) * 12px));
|
|
|
|
opacity: var(--opacity);
|
2024-07-26 18:05:24 -05:00
|
|
|
overflow-wrap: break-word;
|
2024-07-27 09:47:17 -05:00
|
|
|
position: absolute;
|
2024-07-26 18:05:24 -05:00
|
|
|
margin: 0;
|
|
|
|
text-shadow:
|
2024-07-27 09:47:17 -05:00
|
|
|
0px -1px 0px var(--background),
|
|
|
|
1px 0px 0px var(--background),
|
|
|
|
0px 1px 0px var(--background),
|
|
|
|
-1px 0px 0px var(--background),
|
|
|
|
0px -2px 0px var(--background),
|
|
|
|
2px 0px 0px var(--background),
|
|
|
|
0px 2px 0px var(--background),
|
|
|
|
-2px 0px 0px var(--background)
|
|
|
|
;
|
|
|
|
scale: var(--scale);
|
|
|
|
translate:
|
|
|
|
calc(-50% + (1px * var(--offsetX)) + var(--positionX))
|
|
|
|
calc(-50% + (1px * var(--offsetY)) + var(--positionY))
|
2024-07-26 18:05:24 -05:00
|
|
|
;
|
|
|
|
user-select: none;
|
|
|
|
p {
|
|
|
|
margin: 0;
|
|
|
|
}
|
|
|
|
}
|
2024-07-27 09:47:17 -05:00
|
|
|
|
|
|
|
@keyframes move {
|
|
|
|
0% {
|
|
|
|
--offsetX: 0;
|
|
|
|
--offsetY: 0;
|
|
|
|
}
|
|
|
|
33%, 91.6% {
|
|
|
|
--offsetX: calc(80 * var(--randomnessX));
|
|
|
|
--offsetY: calc(-1 * (10 + var(--randomnessY) * 90));
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes fade {
|
|
|
|
0% { --opacity: 0.75; }
|
|
|
|
25% { --opacity: 1; }
|
|
|
|
91.6% { --opacity: 1; }
|
|
|
|
100% { --opacity: 0; }
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes grow {
|
|
|
|
0% { --scale: 0.35; }
|
|
|
|
33% { --scale: 1; }
|
|
|
|
45% { --scale: 1; }
|
|
|
|
40% { --scale: 1.5; }
|
|
|
|
45% { --scale: 1; }
|
|
|
|
91.6% { --scale: 1; }
|
|
|
|
95% { --scale: 0; }
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes shimmer {
|
|
|
|
0% { --hue: 0 }
|
|
|
|
50% { --hue: 30 }
|
|
|
|
100% { --hue: 0 }
|
|
|
|
}
|