alee/stegasoo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Label shine: use mix-blend-mode overlay to mask to text

Browse Source
This commit is contained in:
Aaron D. Lee
2026-01-07 19:39:24 -05:00
parent 189620e4fb
commit 2ee824b02b
1 changed files with 10 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
frontends/web/static/style.css
View File

@@ -130,23 +130,27 @@
content: ''; content: '';
position: absolute; position: absolute;
top: 0; top: 0;
left: -30%; left: 0;
width: 25%; width: 100%;
height: 45%; height: 45%;
background: linear-gradient( background: linear-gradient(
90deg, 90deg,
transparent 0%, transparent 0%,
rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0.6) 50%,
transparent 100% transparent 100%
); );
background-size: 25% 100%;
background-repeat: no-repeat;
background-position: -30% 0;
mix-blend-mode: overlay;
animation: top-shine 4s ease-in-out infinite; animation: top-shine 4s ease-in-out infinite;
pointer-events: none; pointer-events: none;
} }
@keyframes top-shine { @keyframes top-shine {
0%, 15% { left: -30%; } 0%, 15% { background-position: -30% 0; }
40%, 60% { left: 105%; } 40%, 60% { background-position: 130% 0; }
85%, 100% { left: -30%; } 85%, 100% { background-position: -30% 0; }
} }
/* ---------------------------------------------------------------------------- /* ----------------------------------------------------------------------------