Spline
Kausapin ang salesMagsimulang gumawa

Gumawa ng Interactive na Switch gamit ang Progressive Blur at mga Gradient

HanaBaguhan4 min

Sa tutorial na ito, ipapakita namin kung paano gumawa ng interactive na switch na 100% gawa sa Hana gamit ang progressive blur + mga gradient, at isang mouse hover event para sa interaction. Kawili-wiling design ito na magagamit sa iba't ibang project, at gagabayan ka namin sa bawat hakbang.

I-remix ang demo na ito dito: https://app.spline.design/ui/f7cc3864-707e-492a-8148-0e1ea37be1d3

Ang matututunan mo

  1. 0:00Intro
  2. 0:15Paggawa ng base shape
  3. 0:39Pagdaragdag ng gradient
  4. 1:04Pagdaragdag ng layer blur effect
  5. 1:46Paggawa ng mga trigger
  6. 1:57Pagdaragdag ng mouse hover event + mga transition
  7. 2:24Paggawa ng puting stroke + pagdaragdag ng mga state
  8. 3:07Pag-set ng mga transition para sa stroke
  9. 3:35Pagtatapos

Mga kaugnay na resource

Mga kaugnay na tutorial

Lahat ng tutorial
Magdisenyo ng mga Interactive Effect gamit ang Progressive Blur at Smoothing Gradients

HanaBaguhan9 min

Gumawa ng mga Liquid Glass Material sa 3D

Spline 3DBaguhan12 min

Paano Gumawa ng mga 3D Data Visualization sa Spline gamit ang mga Variable at Real-Time API

Spline 3DAdvanced15 min