Spline
Связаться с отделом продажНачать

Интерактивный переключатель с прогрессивным размытием и градиентами

HanaНачальный4 мин

В этом уроке мы покажем, как создать интерактивный переключатель полностью в Hana — с прогрессивным размытием, градиентами и событием наведения мыши для взаимодействия. Это интересный дизайн, который подойдёт для самых разных проектов, и мы разберём каждый шаг.

Сделайте ремикс этого демо: https://app.spline.design/ui/f7cc3864-707e-492a-8148-0e1ea37be1d3

Чему вы научитесь

  1. 0:00Вступление
  2. 0:15Создаём базовую форму
  3. 0:39Добавляем градиент
  4. 1:04Добавляем эффект размытия слоя
  5. 1:46Создаём триггеры
  6. 1:57Добавляем событие наведения мыши и переходы
  7. 2:24Создаём белую обводку и добавляем состояния
  8. 3:07Настраиваем переходы для обводки
  9. 3:35Финал

Полезные материалы

Похожие уроки

Все уроки
Интерактивные эффекты с прогрессивным размытием и плавными градиентами

HanaНачальный9 мин

Материалы из жидкого стекла в 3D

Spline 3DНачальный12 мин

Как создавать 3D-визуализации данных в Spline с помощью переменных и API реального времени

Spline 3DПродвинутый15 мин