Tạo công tắc tương tác với progressive blur và gradient

HanaCơ bản4 phút

Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách tạo một công tắc tương tác được làm 100% trong Hana bằng progressive blur + gradient, cùng sự kiện mouse hover cho tương tác. Đây là một thiết kế thú vị có thể dùng trong nhiều dự án khác nhau, và chúng tôi sẽ hướng dẫn bạn từng bước.

Remix bản demo này tại đây: https://app.spline.design/ui/f7cc3864-707e-492a-8148-0e1ea37be1d3

Bạn sẽ học được gì

  1. 0:00Giới thiệu
  2. 0:15Tạo hình cơ sở
  3. 0:39Thêm gradient
  4. 1:04Thêm hiệu ứng layer blur
  5. 1:46Tạo trigger
  6. 1:57Thêm sự kiện mouse hover + chuyển tiếp
  7. 2:24Tạo stroke trắng + thêm trạng thái
  8. 3:07Thiết lập chuyển tiếp cho stroke
  9. 3:35Kết thúc

Tài nguyên liên quan

Hướng dẫn liên quan

Tất cả hướng dẫn