Анимация градиента у текста Тильда

Портфолио

YouTube

Ресурсы

Поиск

Главная
/
Модификации
/
Анимация градиента у текста

Смотрите обучающее видео на YouTube канале

Анимация градиента у текста

Смотреть

Код для модификации

Вариант 1

Вариант для статичного текста и стандартной анимации

Вариант 2

Вариант для step by step анимации

Вариант 3

Вариант для конкретно выделенного слова в тексте

   <!--https://dsgnmax.ru/animation-gradient-txt--> <style>
.gradient  .tn-atom {        /*Прописываем свой класс*/
    background: linear-gradient(270deg, #9517F9, #FF46CB, #09C4FF);       /*Задаем свои цвета для градиента*/
    background: -webkit-linear-gradient (270deg, #9517F9, #FF46CB, #09C4FF);      /*Задаем свои цвета для градиента*/
    background-clip: text;
    -webkit-background-clip: text;
    text-fill-color: transparent;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    animation: dbm-animation 4s ease infinite;      /*Длительность и плавность анимации*/
    -webkit-animation: dbm-animation 4s ease infinite;      /*Длительность и плавность анимации*/
    background-size: 400% 200%;
}
@keyframes dbm-animation {
   0% {
    background-position: 0%  center;
    }
   50% {
    background-position: 50%  center;
    }
   100% {
    background-position: 0%  center;
    }
}
</style>

   <!--https://dsgnmax.ru/animation-gradient-txt--> <style>
.gradient  .tn-atom__sbs-anim-wrapper  .tn-atom {        /*Прописываем свой класс*/
    background: linear-gradient(270deg, #9517F9, #FF46CB, #09C4FF);       /*Задаем свои цвета для градиента*/
    background: -webkit-linear-gradient (270deg, #9517F9, #FF46CB, #09C4FF);      /*Задаем свои цвета для градиента*/
    background-clip: text;
    -webkit-background-clip: text;
    text-fill-color: transparent;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    animation: dbm-animation 4s ease infinite;      /*Длительность и плавность анимации*/
    -webkit-animation: dbm-animation 4s ease infinite;      /*Длительность и плавность анимации*/
    background-size: 400% 200%;
}
@keyframes dbm-animation {
   0% {
    background-position: 0%  center;
    }
   50% {
    background-position: 50%  center;
    }
   100% {
    background-position: 0%  center;
    }
}
</style>

   <!--https://dsgnmax.ru/animation-gradient-txt--> <style>
.gradient .tn-atom span {        /*Прописываем свой класс*/
    background: linear-gradient(270deg, #9517F9, #FF46CB, #09C4FF);       /*Задаем свои цвета для градиента*/
    background: -webkit-linear-gradient (270deg, #9517F9, #FF46CB, #09C4FF);      /*Задаем свои цвета для градиента*/
    background-clip: text;
    -webkit-background-clip: text;
    text-fill-color: transparent;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    animation: dbm-animation 4s ease infinite;      /*Длительность и плавность анимации*/
    -webkit-animation: dbm-animation 4s ease infinite;      /*Длительность и плавность анимации*/
    background-size: 400% 200%;
}
@keyframes dbm-animation {
   0% {
    background-position: 0%  center;
    }
   50% {
    background-position: 50%  center;
    }
   100% {
    background-position: 0%  center;
    }
}
</style>