September 18, 2023

Анимация текста в Тильда - переливающийся градиент

Создаем анимацию переливающегося градиента:

Шаг 1: Создать Zero Block, добавить текст, поменять фон:

Шаг 2: Добавить HTML-блок, вставить CSS код и задать тексту класс flowtext :

<style>
.flowtext .tn-atom {
background: linear-gradient(90deg, #e933ff, #ffb400, #ff3333, #334dff, #e933ff);
background-size: 200% auto;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: textflow 5s linear infinite;
}
@keyframes textflow {
from {background-position: 0% center}
to {background-position: 200% center}
}
</style>

Шаг 3: Сохранить и опубликовать.

Результат: Градиент текста (tilda.ws)

Больше полезного материала: https://t.me/tilda_easy