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

HanaBaguhan9 min

Sa tutorial na ito, tutuklasin namin ang iba't ibang style at technique sa paggawa ng malambot at sopistikadong mga design gamit ang mga smooth gradient at progressive blur, at kung paano gawing interactive experience ang mga ito sa Hana.

Sisimulan namin sa pagpapaliwanag kung paano magdagdag ng mga gradient at blur effect sa mga hugis, tapos lilipat kami sa paggawa ng mga interactive na elemento gaya ng mga hover animation, mga effect na sumusunod sa cursor, mga looping animation at mga layered blur effect. Handa nang i-embed ang lahat ng ito sa web project mo, walang coding na kailangan! 👌

Mga demo scene: https://app.spline.design/ui/f7cc3864-707e-492a-8148-0e1ea37be1d3

Ang matututunan mo

  1. 0:00Intro
  2. 0:15Simpleng design gamit ang mga gradient
  3. 2:57Pagdaragdag ng layer blur
  4. 3:41Paggawa ng mouse hover interaction
  5. 5:28Paggawa ng interactive na blur effect sa text
  6. 6:44Paggawa ng looping na radial gradient animation
  7. 7:43Paggawa ng gradient at blur effect na sumusunod sa cursor mo

Mga kaugnay na resource

Mga kaugnay na tutorial

Lahat ng tutorial