URL скопирован в буфер обмена!
Как сделать анимацию подчеркивания текста при наведении ?
С помощью данной модификации можно добавить анимацию подчеркивания текста при наведении курсора в Zero Block. Можно выбрать тип и направление анимации, а также задать цвет и ширину линии.
Модификация работает с включенным Autoscale в блоках
Модификация работает только с Zero Block
Номер модификации в библиотеке TiCode
Тип анимации
Класс текста
Направление анимации
Время анимации
Цвет линии
Цвет текста при наведении
Толщина линии
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<!--TCD059--><style>
@media (min-width: 961px) {
.ti-unl::before {
transform: scaleX(0);
content: " ";
display: block;
position: absolute;
transform-origin: top right;
background: #F96855;
width: 100%;
height: 100%;
transition: transform 0.3s ease;
z-index: -1;
}
.ti-unl:hover::before {
transform: scaleX(1);
transform-origin: top left;
}
.ti-unl .tn-atom:hover {
color: !important;
transition: color 0.3s ease;
}
}
</style>
1. Создаем текстовый элемент в Zero Block и назначаем ему класс ti-unl
Чтобы добавить класс блоку, заходим в настройки блока и сверху от id блока будет кнопка "Добавить CSS Class Name"
2. Указываем в генераторе кода дополнительные настройки:
Тип анимации - выбираем эффект анимации: Выделение - при наведении курсора будет манятся цвет подложки текста. Подчеркивание - при наведении текст будет подчеркиваться линией. Зачеркивание - при наведении текст будет зачеркиваться линией;
Направление анимации - указываем направление анимации;
Время анимации - указываем время в секундах;
Цвет линии - указываем цвет линии(если указали тип анимации "выделение", то тут указывается цвет выделения;
Цвет текста при наведении - указываем цвет текста при наведении курсора;
Толщина линии - указываем толщину линии;
3. Копируем готовый код и вставляем в HTML блок Т123.
Примечание! Фрейм текста старайтесь делать как можно ближе к границе самого текста, так как если написали одно слово но фрейм растянули на всю страницу, то анимацию будет рисовать на весь фрейм. Не сокращайте фрейм впритык к тексту иначе будет перенос слов на новую строку. Достаточно фрейм делать на 5-10 пикселей больше чем текст.
Чтобы добавить класс блоку, заходим в настройки блока и сверху от id блока будет кнопка "Добавить CSS Class Name"
2. Указываем в генераторе кода дополнительные настройки:
Тип анимации - выбираем эффект анимации: Выделение - при наведении курсора будет манятся цвет подложки текста. Подчеркивание - при наведении текст будет подчеркиваться линией. Зачеркивание - при наведении текст будет зачеркиваться линией;
Направление анимации - указываем направление анимации;
Время анимации - указываем время в секундах;
Цвет линии - указываем цвет линии(если указали тип анимации "выделение", то тут указывается цвет выделения;
Цвет текста при наведении - указываем цвет текста при наведении курсора;
Толщина линии - указываем толщину линии;
3. Копируем готовый код и вставляем в HTML блок Т123.
Примечание! Фрейм текста старайтесь делать как можно ближе к границе самого текста, так как если написали одно слово но фрейм растянули на всю страницу, то анимацию будет рисовать на весь фрейм. Не сокращайте фрейм впритык к тексту иначе будет перенос слов на новую строку. Достаточно фрейм делать на 5-10 пикселей больше чем текст.
ВЫДЕЛЕНИЕ
ПОДЧЕРКИВАНИЕ
ЗАЧЕРКИВАНИЕ
