Навигация
Получить консультацию менеджера
Нажимая на кнопку "Перезвонить мне" Вы соглашаетесь с политикой конфиденциальности
Социальные сети
Иконка ВК
Иконка Instagram
Иконка Телеграмм
Иконка Яндекс.Дзен
Анимация градиента на тексте

Обратите внимание. Техническая поддержка Tilda Publishing не осуществляет поддержку связанную с работой кода.

Данная модификация приукрасит любой Ваш проект, добавит красивое оформление текста.
Данная модификация позволит создать анимированный градиент любого текста в любом месте.
Отличная возможность приукрасить любой текст и показать, где заголовки.
Обратите внимание, что данный эффект работает как на мобильной версии сайта, так и на десктоп версии.
Как это выглядит?
Я просто красивый текст
Вы можете задать любой цвет градиента для любого текста в любом месте сайта.
Как это добавить?
Первый шаг
Создаём блок T123 и помещаем стили, которые даны ниже.
В linear-gradient задаем нужный цвет в rgb через запятую.
-30deg регулируем уровень наклона градиента.
В animation: gradient 5s задаем необходимое время для проигрывания анимации.

<!-- Взято с сайта https://digistudio.su/animaciya-gradienta-na-tekste-->

<style>
    .gradient .tn-atom {
    animation: gradient 5s ease infinite;
    background: linear-gradient(-30deg, rgb(238 119 82), rgb(231 60 126), rgb(35 166 213), rgb(35 213 171));
	background: -moz-linear-gradient(-30deg, rgb(238 119 82), rgb(231 60 126), rgb(35 166 213), rgb(35 213 171));
    background: -webkit-linear-gradient(-30deg, rgb(238 119 82), rgb(231 60 126), rgb(35 166 213), rgb(35 213 171));
    background: -o-linear-gradient(-30deg, rgb(238 119 82), rgb(231 60 126), rgb(35 166 213), rgb(35 213 171));
    background: -ms-linear-gradient(-30deg, rgb(238 119 82), rgb(231 60 126), rgb(35 166 213), rgb(35 213 171));
    background: linear-gradient(-30deg, rgb(238 119 82), rgb(231 60 126), rgb(35 166 213), rgb(35 213 171));
    background-size: 400% 400%;
    background-clip: text;
    -webkit-background-clip: text;
    text-fill-color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-box-decoration-break: clone;
    }
@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
</style>
Второй шаг
Создаём Zero Block. Прописываем текст. Для нужного текста задаем CSS класс gradient
После применения необходимо опубликовать страницу.
Как Вам модификация?
Made on
Tilda