สร้างสวิตช์อินเทอร์แอคทีฟด้วย Progressive Blur และกราเดียนต์

บทเรียนที่ 8 จาก 15Hanaระดับเริ่มต้น4 นาที

ในบทเรียนนี้ เราจะแสดงวิธีสร้างสวิตช์อินเทอร์แอคทีฟที่ทำใน Hana 100% โดยใช้ progressive blur + กราเดียนต์ และอีเวนต์วางเมาส์สำหรับการโต้ตอบ เป็นงานออกแบบที่น่าสนใจซึ่งใช้ได้ในหลากหลายโปรเจกต์ และเราจะพาคุณไปทีละขั้นตอน

รีมิกซ์เดโมนี้ได้ที่: https://app.spline.design/ui/f7cc3864-707e-492a-8148-0e1ea37be1d3

สิ่งที่คุณจะได้เรียนรู้

  1. 0:00บทนำ
  2. 0:15สร้างรูปทรงฐาน
  3. 0:39เพิ่มกราเดียนต์
  4. 1:04เพิ่มเอฟเฟกต์ Layer Blur
  5. 1:46สร้างทริกเกอร์
  6. 1:57เพิ่มอีเวนต์วางเมาส์ + ทรานซิชัน
  7. 2:24สร้างเส้นขอบสีขาว + เพิ่มสเตต
  8. 3:07ตั้งค่าทรานซิชันให้เส้นขอบ
  9. 3:35ปิดท้าย

แหล่งข้อมูลที่เกี่ยวข้อง