Шиммер-блик
лоадеры Apple Волна букв →

Появление текста

Шиммер-блик

Узкая полоса света бесконечно пробегает по буквам через background-clip.

Просто смотрите.

ШИММЕР ПО ТЕКСТУ

блик пробегает бесконечно — как по металлу

Код
<h1 class="shimmer">ЗАГОЛОВОК</h1>

<style>
.shimmer {
  background: linear-gradient(110deg,
    #3a4150 42%, #f2f5fa 50%, #3a4150 58%);   /* узкий блик */
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shm 2.6s linear infinite;
}
@keyframes shm {
  from { background-position: 120% 0; }
  to   { background-position: -120% 0; } }
</style>
Промпт для ИИ
Сделай шиммер-блик по тексту: градиент linear-gradient(110deg, тёмный 42%, светлый 50%, тёмный 58%) с background-size 220% 100%, background-clip:text + color:transparent; анимация background-position от 120% к -120% за 2.6s linear infinite — узкая полоса света пробегает по буквам. Хорош для лоадеров и акцентных слов. При prefers-reduced-motion — статичный цвет.