Interaktive Effekte mit Progressive Blur und weichen Verläufen designen

Lektion 7 von 15HanaEinsteiger9 Min.

In diesem Tutorial erkunden wir verschiedene Stile und Techniken, um mit weichen Verläufen und Progressive Blur sanfte, raffinierte Designs zu gestalten – und wie du sie in Hana in interaktive Erlebnisse verwandelst.

Zuerst erklären wir, wie du Formen Verläufe und Blur-Effekte hinzufügst, dann bauen wir interaktive Elemente wie Hover-Animationen, Effekte, die dem Cursor folgen, Endlosanimationen und geschichtete Blur-Effekte. Alles bereit zum Einbetten in dein Webprojekt, ganz ohne Code! 👌

Demo-Szenen: https://app.spline.design/ui/f7cc3864-707e-492a-8148-0e1ea37be1d3

Das lernst du

  1. 0:00Intro
  2. 0:15Einfaches Design mit Verläufen
  3. 2:57Layer Blur hinzufügen
  4. 3:41Eine Mouse-Hover-Interaktion erstellen
  5. 5:28Einen interaktiven Blur-Effekt auf Text erstellen
  6. 6:44Eine endlose radiale Verlaufsanimation erstellen
  7. 7:43Einen Verlaufs- und Blur-Effekt erstellen, der dem Cursor folgt

Weitere Ressourcen