文字闪光效果

CSS
:root {
/* 高亮区域宽度 */
--shimmer-width: 54px;
/* 纯色 */
/*--shimmer-color: linear-gradient(90deg, red, red);*/
/* 渐变 */
--shimmer-color: linear-gradient(90deg, white, blue, white);
/* 动画时长 */
--shimmer-duration: 2s;
}
@keyframes shimmer {
0% {
background-position-x: calc(0 - var(--shimmer-width));
}
100% {
background-position-x: calc(100% + var(--shimmer-width));
}
}
.shimmer {
background-clip: text;
background-position: 0 0;
background-size: var(--shimmer-width) 100%;
background-color: #BBBFC4;
background-image: var(--shimmer-color);
background-repeat: no-repeat;
color: transparent;
animation: shimmer var(--shimmer-duration) linear infinite;
}
HTML
<span class="shimmer">CSS 实现文字的 Shimmer 效果</span>