<!--
* 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>