Створіть інтерактивний перемикач із прогресивним розмиттям і градієнтами

Урок 8 з 15HanaПочатковий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Завершення

Корисні матеріали