Pro
Setup
Info
Info
Включено в подписку
Настройки
[
Написать в поддержку
Telegram: @sonneto_support
Кастомизация
]
Beautiful gradient
Beautiful gradient
Теги
Модификация
#
CSS
#
Текст
#
Градиент
#
Настройки модификации
- Открываем Zero Block и заходим в режим редактирования.
- Вставляем текст на страницу и назначаем ему класс: btn-sonneto-primary
- Далее добавляем блок T123 и вставляем в него подготовленный код.
Модификация позволяет анимировать градиент на любом тексте всего в несколько кликов.
<style>
.gradient .tn-atom {
animation: gradient 15s ease infinite;
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background: -moz-linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background: -webkit-linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background: -o-linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background: -ms-linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
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>
.gradient .tn-atom {
animation: gradient 15s ease infinite;
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background: -moz-linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background: -webkit-linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background: -o-linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background: -ms-linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
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>
Анимация градиента в тексте
81509876
id:
Базовые настройки
- Направление градиента → -45deg (например: 90deg – горизонтально, 180deg – вертикально)
- Скорость анимации → animation: gradient 15s (например: 5s для быстрой смены или 30s для плавного перелива)
- Тип анимации → ease, linear, cubic-bezier (задаёт ритм движения)
Подключение скриптов
Технические советы
- В некоторых версиях Safari текст может не окрашиваться в градиент → нужно оставить -webkit-background-clip: text; и -webkit-text-fill-color: transparent;.
- Если градиент «дёргается» при прокрутке, стоит проверить свойство background-attachment.
- При большом количестве градиентных элементов анимация может грузить браузер → лучше снижать background-size или увеличить animation-duration.
- Если нужно, чтобы градиент работал и на мобильных, тестируй в iOS/Android — старые браузеры могут некорректно поддерживать background-clip.
Для корректной работы модификации необходимо, чтобы на странице была подключена библиотека jQuery, так как скрипт использует $(document).ready() и .each().
Информация о кастомизации кода доступна только в веб-версии сайта.
Сделать это можно в разделе: Настройки сайта - Ещё - Подключить jQuery на страницах сайта.
В Zero Block скрипты рекомендуется вставлять только после полной загрузки контента страницы, чтобы все элементы блока были доступны для обработки.
Текст скопирован в буфер обмена!
Текст скопирован в буфер обмена!