Simpler shimmering gold labels - gradient text, no pseudo-elements
This commit is contained in:
@@ -117,42 +117,28 @@
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------------------------
|
||||
Form Labels - Gold with Top Shine
|
||||
Form Labels - Shimmering Gold
|
||||
---------------------------------------------------------------------------- */
|
||||
.card .form-label {
|
||||
color: #ffe699;
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
padding: 2px 0;
|
||||
}
|
||||
|
||||
.card .form-label::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent 0%,
|
||||
rgba(255, 255, 255, 0.6) 50%,
|
||||
transparent 100%
|
||||
#ffe699 0%,
|
||||
#ffe699 35%,
|
||||
#fff8e0 50%,
|
||||
#ffe699 65%,
|
||||
#ffe699 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;
|
||||
background-size: 200% 100%;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
animation: gold-shimmer 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes top-shine {
|
||||
0%, 15% { background-position: -30% 0; }
|
||||
40%, 60% { background-position: 130% 0; }
|
||||
85%, 100% { background-position: -30% 0; }
|
||||
@keyframes gold-shimmer {
|
||||
0%, 20% { background-position: 100% 0; }
|
||||
50%, 70% { background-position: 0% 0; }
|
||||
100% { background-position: 100% 0; }
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------------------------
|
||||
|
||||
Reference in New Issue
Block a user