didirus/AstralRinth
5
10
Fork 33
Code Issues 2 Pull Requests Packages Projects Releases 12 Wiki Activity

perf: reduce expensive neon animation effects

Browse Source
This commit is contained in:
didirus
2026-06-17 02:50:11 +03:00
parent 24d082e6a6
commit b88bd246f8
2 changed files with 20 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/assets/styles/astralrinth/neon-button.scss
+10 -5
View File
@@ -12,9 +12,13 @@
0 0 12px rgba(122, 31, 199, 0.5);
transition:
color 0.25s ease,
box-shadow 0.3s ease,
transform 0.15s ease;
box-shadow: 0 0 4px rgba(79, 173, 255, 0.5);
transform 0.15s ease,
opacity 0.25s ease;
box-shadow:
0 0 4px rgba(79, 173, 255, 0.35),
inset 0 0 4px rgba(79, 173, 255, 0.2);
will-change: transform, opacity;
transform: translateZ(0);
}
.bordered {
@@ -28,10 +32,11 @@
.neon-button.neon
:slotted(*) :is(button, a, .button-like):hover:not([disabled]):not(.disabled) {
color: #10fae5;
transform: scale(1.02);
transform: translateZ(0) scale(1.02);
opacity: 0.96;
box-shadow:
0 0 4px rgba(16, 250, 229, 0.3),
0 0 8px rgba(16, 250, 229, 0.2);
inset 0 0 4px rgba(16, 250, 229, 0.2);
text-shadow:
0 0 2px rgba(16, 250, 229, 0.4),
0 0 4px rgba(16, 250, 229, 0.25);
packages/assets/styles/astralrinth/neon-icon.scss
+10 -6
View File
@@ -9,14 +9,17 @@
transition:
transform 0.25s ease,
color 0.25s ease,
text-shadow 0.25s ease;
opacity 0.25s ease;
cursor: pointer;
display: inline-block;
will-change: transform, opacity;
transform: translateZ(0);
}
.neon-icon:hover {
color: #10fae5;
transform: scale(1.05);
transform: translateZ(0) scale(1.05);
opacity: 0.92;
text-shadow:
0 0 2px rgba(16, 250, 229, 0.4),
0 0 4px rgba(16, 250, 229, 0.25);
@@ -25,17 +28,18 @@
.neon-icon.pulse {
position: relative;
animation: neon-pulse 1s ease-in-out infinite;
filter: drop-shadow(0 0 6px #10fae5);
box-shadow: none;
opacity: 1;
}
@keyframes neon-pulse {
0%,
100% {
filter: drop-shadow(0 0 4px #10fae5);
transform: translateZ(0) scale(1);
opacity: 0.82;
}
50% {
filter: drop-shadow(0 0 12px #10fae5);
transform: translateZ(0) scale(1.08);
opacity: 1;
}
}