Как в Тильде сделать анимацию скругления углов при наведении

Вы сможете добавить анимацию скругления при наведении мыши на элемент

Пример

Кнопка SBS
Кнопка
Шейп

Инструкция


  1. Копируете код в T123;
  2. Заполняете настройки*;
  3. Устанавливаете внизу страницы, если используете на всем сайте, то устанавливайте в подвал;
  4. Создаете ZeroBlock;
  5. Добавляете элементы;
  6. Присваиваете классы:** «shape-hover-br» — для шейпа; «btn-hover-br» — кнопки; «img-hover-br» — для изображения; «form-hover-br» — для формы;
  7. Заполняем настройки;
  8. Если необходимо добавляем настройки для адаптивов;
  9. Публикуйте страницу.

*Настройки помечены комментариями в коде.
** Классы для шейпа/кнопки/картинки сделаны больше для примера, чтобы разнообразить скругления в рамках 1-го блока. Данные элементы одинаковы по структуре, поэтому можно менять типы блока вне зависимости от класса. Только класс «form-hover-br» рассчитан для работы с формой.

Код примера


<!--
 * Name: Анимация border radius при наведении
 * Description: Код добавляет анимацию скругления при наведении мыши на элемент
 * Author: ANKU
 * URL: https://anku.one/hover-radius
-->
<style>
    :root {
        --trans-time: 0.2s; /* Если время анимации везеде разное - удалите или закомментируйте эту строку */
        /* 
            * если вы убрали общую переменную выше, не обязательно
            * убирать ее ниже, меняйте только цифру с указанием времени
            * если переменная не задана, будет срабатывать время, указанное после переменной.
        */
        
        /* Для шейпа */
        --shape-trans-time: var(--trans-time, 0.2s); /* Время анимации */
        --shape-br-hover: 48px; /* Радиус скругления при наведении */
        
        /* Для кнопки */
        --btn-trans-time: var(--trans-time, 0.2s); /* Время анимации */
        --btn-br-hover: 32px; /* Радиус скругления при наведении */
        
        /* Для изображения */
        --img-trans-time: var(--trans-time, 0.2s); /* Время анимации */
        --img-br-hover: 48px; /* Радиус скругления при наведении */
        
        /* Для формы */
        --form-btn-trans-time: var(--trans-time, 0.2s); /* Время анимации */
        --form-btn-br-hover: 32px; /* Радиус скругления при наведении */
        
        /* Для активного поля ввода - при клике на поле ввода */
        --form-inpit-trans-time: var(--trans-time, 0.2s); /* Время анимации */
        --form-inpit-br-focus: 32px; /* Радиус скругления при наведении */
    }
    /* Тут добавляем адаптивы, стандартные значения для Тильды: 1200px / 960px / 640px / 480px */
    @media screen and (max-width: 960px) {
        :root {
            /* Для шейпа */
            --shape-br-hover: 32px; /* Радиус скругления при наведении */
            
            /* Для кнопки */
            --btn-br-hover: 24px; /* Радиус скругления при наведении */
            
            /* Для изображения */
            --img-br-hover: 32px; /* Радиус скругления при наведении */
            
            /* Для формы */
            --form-btn-br-hover: 24px; /* Радиус скругления при наведении */
            
            /* Для активного поля ввода - при клике на поле ввода */
            --form-inpit-br-focus: 24px; /* Радиус скругления при наведении */
        }
    }
</style>
<!--Не менять код ниже этого комментария-->
<style>.shape-hover-br .tn-atom{transition:all var(--shape-trans-time) ease-in-out!important}.btn-hover-br .tn-atom{transition:all var(--btn-trans-time) ease-in-out!important}.img-hover-br .tn-atom{transition:all var(--img-trans-time) ease-in-out!important}.form-hover-br .t-input-group input{transition:all var(--form-inpit-trans-time) ease-in-out!important}.form-hover-br button.t-submit{transition:all var(--form-btn-trans-time) ease-in-out!important}@media (any-pointer:fine){.shape-hover-br .tn-atom:hover{border-radius:var(--shape-br-hover)!important}.btn-hover-br .tn-atom:hover{border-radius:var(--btn-br-hover)!important}.img-hover-br .tn-atom:hover{border-radius:var(--img-br-hover)!important}.form-hover-br button.t-submit:hover{border-radius:var(--form-btn-br-hover)!important}}#allrecords .form-hover-br .t-input-group input:focus{border-radius:var(--form-inpit-br-focus)!important}.shape-hover-br .tn-atom:active{border-radius:var(--shape-br-hover)!important}.btn-hover-br .tn-atom:active{border-radius:var(--btn-br-hover)!important}.img-hover-br .tn-atom:active{border-radius:var(--img-br-hover)!important}.form-hover-br button.t-submit:active{border-radius:var(--form-btn-br-hover)!important}</style><script>console.log("Хочешь сделать анимацию скругления для Tilda, смотри эту статью: https://anku.one/hover-radius")</script>

Дополнение

Данный код можно расширить под любые элементы, добавить варианты скруглений.
Если есть вопросы или подобные задачи, пишите!
Made on
Tilda