155 lines
2.6 KiB
CSS
155 lines
2.6 KiB
CSS
/**
|
|
* Shimmer animation styles
|
|
* Provides a sword-like shimmer effect for elements
|
|
*/
|
|
|
|
@keyframes shimmer {
|
|
0% {
|
|
transform: translateX(-100%);
|
|
opacity: 0;
|
|
}
|
|
20% {
|
|
opacity: 1;
|
|
}
|
|
40% {
|
|
transform: translateX(100%);
|
|
opacity: 0;
|
|
}
|
|
50% {
|
|
transform: translateX(-100%);
|
|
opacity: 0;
|
|
}
|
|
70% {
|
|
opacity: 1;
|
|
}
|
|
90% {
|
|
transform: translateX(100%);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
transform: translateX(100%);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes shimmer-text {
|
|
0% {
|
|
background-position: -200% center;
|
|
}
|
|
45% {
|
|
background-position: 200% center;
|
|
}
|
|
50% {
|
|
background-position: -200% center;
|
|
}
|
|
95% {
|
|
background-position: 200% center;
|
|
}
|
|
96%, 100% {
|
|
background-position: 200% center;
|
|
-webkit-text-fill-color: currentColor;
|
|
background: none;
|
|
}
|
|
}
|
|
|
|
@keyframes symbol-rotate {
|
|
0% {
|
|
content: '◐';
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
25% {
|
|
content: '◓';
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
50% {
|
|
content: '◑';
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
75% {
|
|
content: '◒';
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
100% {
|
|
content: '◐';
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
}
|
|
|
|
.shimmer-once {
|
|
position: relative;
|
|
display: inline-block;
|
|
background: linear-gradient(
|
|
105deg,
|
|
currentColor 0%,
|
|
currentColor 40%,
|
|
#d97757 50%,
|
|
currentColor 60%,
|
|
currentColor 100%
|
|
);
|
|
background-size: 200% auto;
|
|
background-position: -200% center;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
animation: shimmer-text 1s ease-out forwards;
|
|
}
|
|
|
|
.rotating-symbol {
|
|
display: inline-block;
|
|
color: #d97757;
|
|
font-size: inherit;
|
|
margin-right: 0.5rem;
|
|
font-weight: bold;
|
|
vertical-align: text-bottom;
|
|
position: relative;
|
|
line-height: 1;
|
|
}
|
|
|
|
.rotating-symbol::before {
|
|
content: '◐';
|
|
display: inline-block;
|
|
animation: symbol-rotate 2s linear infinite;
|
|
font-size: inherit;
|
|
line-height: inherit;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
.shimmer-hover {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.shimmer-hover::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -50%;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 200%;
|
|
background: linear-gradient(
|
|
105deg,
|
|
transparent 0%,
|
|
transparent 40%,
|
|
rgba(217, 119, 87, 0.4) 50%,
|
|
transparent 60%,
|
|
transparent 100%
|
|
);
|
|
transform: translateX(-100%) rotate(-10deg);
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
}
|
|
|
|
.shimmer-hover > * {
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.shimmer-hover:hover::before {
|
|
animation: shimmer 1s ease-out;
|
|
} |