SM - Стильные решения для вашего сайта

Заливка в движении: стильный эффект для контурного текста

Плавный эффект заливки контурного текста

Плавный эффект заливки контурного текста

Придайте вашему тексту динамику и креативность с эффектом плавной псевдотекстовой заливки. Этот современный визуальный элемент делает контурный текст живым и привлекает внимание пользователей благодаря движению заливки, которая проходит справа налево.

Эффект выполнен с использованием CSS-анимации, что обеспечивает лёгкость и высокую производительность. Это идеальное решение для создания интерактивных заголовков, баннеров и акцентных элементов на веб-страницах.

Особенности эффекта:

  • Плавность анимации: заливка движется мягко и естественно, создавая эффект текучести.
  • CSS-only реализация: не требует jаvascript, минимальная нагрузка на сайт.
  • Кастомизация: легко изменяйте цвета, скорость и размеры под свои задачи.
  • Адаптивность: эффект корректно работает на любых устройствах.

Идеально подходит для сайтов с современным дизайном, где важно подчеркнуть стиль и уникальность. Заливка контурного текста станет ярким акцентом вашего проекта.

See the Pen 1 elem, no pseudo text fill effect in 5 declarations by Ana Tudor (@thebabydino) on CodePen.

        
HTML

<h1 class='text-fill'>text fill effect</h1>

        
CSS
/* relevant styles */
.text-fill {
background: /* 1 */
linear-gradient(#a7c957 0 0) 
0/ 100% repeat-y text;
color: #0000; /* 2 */
-webkit-text-stroke: 2px #386641;
animation: text-fill 8s 
cubic-bezier(.35, 0, .35, 1) 
infinite alternate /* 4 */
}
 
@keyframes text-fill {
0% { background-size: 0 /* 5 */ }
}
 
/* layout, prettifying, 
 * not relevant for fill effect */
html, body { display: grid }
 
html { min-height: 100% }
 
body {
background: 
radial-gradient(#f2e8cf, #bc4749)
}
 
h1 {
place-self: center;
font: 900 
clamp(2em, min(43vh, 15vw), 15em) 
advent pro, cursive;
text-transform: capitalize;
}

1-elem-no-pseudo-text-fill-effect-in-5-declarations.zip
0 5.69 Kb
Нашли ошибку? Сообщите нам, мы исправим!
0 лайков 0 просмотров
Комментариев нет
Чтобы оставить комментарий, необходимо на сайте.
Копирование запрещено!

Сайт SATAMAX.RU