мои проекты
модификации
melStyles
Telegram
Pinterest
Behance
Instagram
meloddy.
design
Главная
Модификации
melStyles
Мои проекты
Эффекты
Вкладка «Ховер»
Создание эффектов при наведении курсора на элемент. Включает 3D-эффекты, конструктор анимаций и Backdrop Filter.
Описание
Вкладка Hover позволяет создавать интерактивные эффекты для элементов. Выберите готовый пресет или создайте собственный эффект с помощью конструктора.
Как работать
Выберите элемент на странице
Перейдите во вкладку Hover
Выберите подкладку (3D, Конструктор или Backdrop)
Примените готовый пресет или настройте свой эффект
Скопируйте CSS-код
3D Эффекты / 3D Presets
Готовые 3D-трансформации при наведении курсора.
Пресет;Эффект;Transform
tilt-up; Наклон вверх; rotateX(10deg) translateY(-10px) tilt-down; Наклон вниз; rotateX(-10deg) translateY(10px) tilt-left; Наклон влево; rotateY(10deg) translateX(-10px) tilt-right; Наклон вправо; rotateY(-10deg) translateX(10px) lift; Подъём; translateY(-20px) zoom-3d; 3D зум; translateZ(50px) grow; Увеличение; scale(1.1) pop; Всплытие; scale(1.1), + тень flip-x; Переворот по X; rotateX(180deg) flip-y; Переворот по Y; rotateY(180deg) float; Парение; translateY(-10px), + тень glow; Свечение; scale(1.02), + свечение
Button
Конструктор анимаций
Создание собственных hover-эффектов с точной настройкой параметров.
Параметр; Описание; Диапазон
Scale; Масштаб при наведении; 0.5 – 2.0 Rotate; Угол поворота; -180° – 180° Translate X; Смещение по горизонтали; -100px – 100px Translate Y; Смещение по вертикали; -100px – 100px Duration; Длительность анимации; 0.1s – 2s Easing; Тип плавности; ease, ease-in, ease-out, linear
Button
Интерактивный превью:
3D-куб показывает трансформации в реальном времени при изменении параметров.
Backdrop Filter
Эффект «стекла» (glassmorphism) для фона элемента.
Параметр; Описание; Пример
Blur; Размытие фона; blur(10px) Saturation; Насыщенность; saturate(180%) Brightness; Яркость; brightness(1.2) Contrast; Контраст; contrast(1.1)
Button
Made on
Tilda
