CSS Shimmer Text
光のシマーがテキスト上を横切るCSSのみのエフェクト。
HTML
<h2 class="cst-text">SHIMMER</h2>
CSS
.cst-text {
font-size: 42px;
font-weight: 900;
letter-spacing: 4px;
color: #334155;
background: linear-gradient(
90deg,
#334155 0%,
#334155 40%,
#e2e8f0 50%,
#334155 60%,
#334155 100%
);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: cst-shimmer 2.5s linear infinite;
}
@keyframes cst-shimmer {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}