# Reka Bentuk Kesan Interaktif dengan Progressive Blur dan Gradien Licin - 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. [Tutorial](https://spline.design/ms/academy/tutorials)
3. Reka Bentuk Kesan Interaktif dengan Progressive Blur dan Gradien Licin

# Reka Bentuk Kesan Interaktif dengan Progressive Blur dan Gradien Licin

HanaPemula9 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

## Sebahagian daripada

- [Hana | Semua yang Perlu Anda Ketahui](https://spline.design/ms/academy/collections/hana-everything-you-need-to-know/design-interactive-effects-with-progressive-blur-and-smoothing-gradients)

## Tutorial berkaitan

[Semua tutorial](https://spline.design/ms/academy/tutorials)

[Cipta Suis Interaktif dengan Progressive Blur dan GradienHanaPemula4 min](https://spline.design/ms/academy/tutorials/create-an-interactive-switch-with-progressive-blur-and-gradients)[Cipta Bahan Liquid Glass dalam 3DSpline 3DPemula12 min](https://spline.design/ms/academy/tutorials/create-liquid-glass-materials-in-3d)[Cara Mencipta Visualisasi Data 3D dalam Spline Menggunakan Pemboleh Ubah dan API Masa NyataSpline 3DLanjutan15 min](https://spline.design/ms/academy/tutorials/how-to-create-3d-data-visualizations-in-spline-using-variables-and-real-time-apis)

[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.