Label shine: use mix-blend-mode overlay to mask to text
This commit is contained in:
@@ -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; }
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------------------------
|
||||
|
||||
Reference in New Issue
Block a user