# Reka Bentuk Kesan Interaktif dengan Progressive Blur dan Gradien Licin - Hana | Semua yang Perlu Anda Ketahui - Spline Academy (https://spline.design/ms/academy/tutorials/design-interactive-effects-with-progressive-blur-and-smoothing-gradients)

> Dalam tutorial ini, kami akan meneroka pelbagai gaya dan teknik untuk mencipta reka bentuk yang lembut dan canggih menggunakan gradien licin dan progressive…

1. [Academy](https://spline.design/ms/academy)
2. [Kursus](https://spline.design/ms/academy/collections)
3. [Hana | Semua yang Perlu Anda Ketahui](https://spline.design/ms/academy/collections/hana-everything-you-need-to-know)
4. Reka Bentuk Kesan Interaktif dengan Progressive Blur dan Gradien Licin

# Reka Bentuk Kesan Interaktif dengan Progressive Blur dan Gradien Licin

Pelajaran 7 daripada 15HanaPemula9 min

Dalam tutorial ini, kami akan meneroka pelbagai gaya dan teknik untuk mencipta reka bentuk yang lembut dan canggih menggunakan gradien licin dan progressive blur, serta cara mengubahnya menjadi pengalaman interaktif dalam Hana.

Kami akan bermula dengan menerangkan cara menambah gradien dan kesan kabur pada bentuk, kemudian beralih kepada mencipta elemen interaktif seperti animasi hover, kesan yang mengikut kursor, animasi berulang dan kesan kabur berlapis. Semua ini sedia untuk dibenamkan ke dalam projek web anda, tanpa perlu menulis kod! 👌

Adegan demo: <https://app.spline.design/ui/f7cc3864-707e-492a-8148-0e1ea37be1d3>

## Apa yang akan anda pelajari

1. [0:00Pengenalan](https://www.youtube.com/watch?v=hr5wqdVX4co&t=0s)
2. [0:15Reka bentuk ringkas dengan gradien](https://www.youtube.com/watch?v=hr5wqdVX4co&t=15s)
3. [2:57Menambah layer blur](https://www.youtube.com/watch?v=hr5wqdVX4co&t=177s)
4. [3:41Mencipta interaksi mouse hover](https://www.youtube.com/watch?v=hr5wqdVX4co&t=221s)
5. [5:28Mencipta kesan kabur interaktif pada teks](https://www.youtube.com/watch?v=hr5wqdVX4co&t=328s)
6. [6:44Mencipta animasi gradien jejarian yang berulang](https://www.youtube.com/watch?v=hr5wqdVX4co&t=404s)
7. [7:43Mencipta kesan gradien dan kabur yang mengikut kursor anda](https://www.youtube.com/watch?v=hr5wqdVX4co&t=463s)

## Sumber berkaitan

- [Circular BlurTemplat](https://app.spline.design/academy/tutorials/design-interactive-effects-with-progressive-blur-and-smoothing-gradients?redirect-duplicate-template-uuid=fa1a715c-86bd-40db-b012-f8c407b7e998&is-2d-file=true)
- [Effects in HanaDokumen](https://docs.spline.design/hana-a-canvas-for-interactivity/effects-in-hana)
- [Interactivity in HanaDokumen](https://docs.spline.design/hana-a-canvas-for-interactivity/interactivity-in-hana)

## Gambaran keseluruhan

- Hana
- 9 min
- Pemula

## Seterusnya

[Cipta Suis Interaktif dengan Progressive Blur dan Gradien4 minPemula](https://spline.design/ms/academy/collections/hana-everything-you-need-to-know/create-an-interactive-switch-with-progressive-blur-and-gradients)[Teruskan](https://spline.design/ms/academy/collections/hana-everything-you-need-to-know/create-an-interactive-switch-with-progressive-blur-and-gradients)

[Spline](https://spline.design/ms)

Editor 3D dan 2D untuk pasukan dan ejen mereka. Terbitkan ke web, iOS dan Android.

#### Tanya AI tentang Spline

#### Produk

- [Reka Bentuk 3D](https://spline.design/ms/3d-design)
- [Hana](https://spline.design/ms/hana)
- [Omma](https://omma.build)
- [Penjanaan 3D AI](https://spline.design/ms/ai-generate)
- [Spline MCP](https://spline.design/ms/mcp)
- [Spline Arena](https://spline.design/ms/arena)
- [Harga](https://spline.design/ms/pricing)
- [Perusahaan](https://spline.design/ms/enterprise)

#### Runtime

- [Web](https://spline.design/ms/web)
- [iOS](https://spline.design/ms/ios)
- [Android](https://spline.design/ms/android)

#### Aplikasi

- [Muat Turun](https://spline.design/ms/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Muat turun Spline Mirror](https://spline.design/download-mirror)

#### Belajar

- [Docs](https://docs.spline.design/)
- [Academy](https://spline.design/ms/academy)
- [API Spline](https://www.npmjs.com/package/@splinetool/runtime)
- [Penyelesaian](https://spline.design/solutions)

#### Komuniti

- [Komuniti Spline](https://community.spline.design)
- [Blog](https://spline.design/ms/blog)
- [Log Perubahan](https://spline.design/ms/changelog)
- [Pendidikan](https://spline.design/ms/education)
- [Contra](https://spline.design/contra)
- [Afiliat](https://spline.design/ms/affiliate)

#### Syarikat

- [Pelanggan](https://spline.design/ms/customers)
- [Kerjaya](https://www.ycombinator.com/companies/spline/jobs)
- [Keselamatan](https://spline.design/ms/security)

#### Undang-undang

- [Terma & Syarat](https://spline.design/terms)
- [Privasi](https://spline.design/privacy)

#### Hubungi

- [help@spline.design](mailto:help@spline.design)
- [jobs@spline.design](mailto:jobs@spline.design)

© 2026 - Spline, Inc.