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

This commit is contained in:
Aaron D. Lee
2026-01-07 19:39:24 -05:00
parent 189620e4fb
commit 2ee824b02b

View File

@@ -130,23 +130,27 @@
content: '';
position: absolute;
top: 0;
left: -30%;
width: 25%;
left: 0;
width: 100%;
height: 45%;
background: linear-gradient(
90deg,
transparent 0%,
rgba(255, 255, 255, 0.25) 50%,
rgba(255, 255, 255, 0.6) 50%,
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;
pointer-events: none;
}
@keyframes top-shine {
0%, 15% { left: -30%; }
40%, 60% { left: 105%; }
85%, 100% { left: -30%; }
0%, 15% { background-position: -30% 0; }
40%, 60% { background-position: 130% 0; }
85%, 100% { background-position: -30% 0; }
}
/* ----------------------------------------------------------------------------