# Tạo công tắc tương tác với progressive blur và gradient - Spline Academy (https://spline.design/vi/academy/tutorials/create-an-interactive-switch-with-progressive-blur-and-gradients)

> Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách tạo một công tắc tương tác được làm 100% trong Hana bằng progressive blur + gradient, cùng sự kiện mouse…

1. [Academy](https://spline.design/vi/academy)
2. [Hướng dẫn](https://spline.design/vi/academy/tutorials)
3. Tạo công tắc tương tác với progressive blur và gradient

# Tạo công tắc tương tác với progressive blur và gradient

HanaCơ bản4 phút

Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách tạo một công tắc tương tác được làm 100% trong Hana bằng progressive blur + gradient, cùng sự kiện mouse hover cho tương tác. Đây là một thiết kế thú vị có thể dùng trong nhiều dự án khác nhau, và chúng tôi sẽ hướng dẫn bạn từng bước.

Remix bản demo này tại đây: <https://app.spline.design/ui/f7cc3864-707e-492a-8148-0e1ea37be1d3>

## Bạn sẽ học được gì

1. [0:00Giới thiệu](https://www.youtube.com/watch?v=a-fKAlKbuP4&t=0s)
2. [0:15Tạo hình cơ sở](https://www.youtube.com/watch?v=a-fKAlKbuP4&t=15s)
3. [0:39Thêm gradient](https://www.youtube.com/watch?v=a-fKAlKbuP4&t=39s)
4. [1:04Thêm hiệu ứng layer blur](https://www.youtube.com/watch?v=a-fKAlKbuP4&t=64s)
5. [1:46Tạo trigger](https://www.youtube.com/watch?v=a-fKAlKbuP4&t=106s)
6. [1:57Thêm sự kiện mouse hover + chuyển tiếp](https://www.youtube.com/watch?v=a-fKAlKbuP4&t=117s)
7. [2:24Tạo stroke trắng + thêm trạng thái](https://www.youtube.com/watch?v=a-fKAlKbuP4&t=144s)
8. [3:07Thiết lập chuyển tiếp cho stroke](https://www.youtube.com/watch?v=a-fKAlKbuP4&t=187s)
9. [3:35Kết thúc](https://www.youtube.com/watch?v=a-fKAlKbuP4&t=215s)

## Tài nguyên liên quan

- [Progressive SwitchMẫu](https://app.spline.design/academy/tutorials/create-an-interactive-switch-with-progressive-blur-and-gradients?redirect-duplicate-template-uuid=e28be289-db51-434b-8bc6-772f993823a8&is-2d-file=true)
- [Effects in HanaTài liệu](https://docs.spline.design/hana-a-canvas-for-interactivity/effects-in-hana)
- [Interactivity in HanaTài liệu](https://docs.spline.design/hana-a-canvas-for-interactivity/interactivity-in-hana)

## Tổng quan

- Hana
- 4 phút
- Cơ bản

## Thuộc

- [Hana | Mọi điều bạn cần biết](https://spline.design/vi/academy/collections/hana-everything-you-need-to-know/create-an-interactive-switch-with-progressive-blur-and-gradients)

## Hướng dẫn liên quan

[Tất cả hướng dẫn](https://spline.design/vi/academy/tutorials)

[Thiết kế hiệu ứng tương tác với progressive blur và gradient mượtHanaCơ bản9 phút](https://spline.design/vi/academy/tutorials/design-interactive-effects-with-progressive-blur-and-smoothing-gradients)[Tạo vật liệu Liquid Glass trong 3DSpline 3DCơ bản12 phút](https://spline.design/vi/academy/tutorials/create-liquid-glass-materials-in-3d)[Cách tạo trực quan hóa dữ liệu 3D trong Spline bằng biến và API thời gian thựcSpline 3DNâng cao15 phút](https://spline.design/vi/academy/tutorials/how-to-create-3d-data-visualizations-in-spline-using-variables-and-real-time-apis)

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

Trình chỉnh sửa 3D và 2D cho các nhóm và tác nhân AI của họ. Xuất bản lên web, iOS và Android.

#### Hỏi AI về Spline

#### Sản phẩm

- [Thiết kế 3D](https://spline.design/vi/3d-design)
- [Hana](https://spline.design/vi/hana)
- [Omma](https://omma.build)
- [Tạo 3D bằng AI](https://spline.design/vi/ai-generate)
- [Spline MCP](https://spline.design/vi/mcp)
- [Spline Arena](https://spline.design/vi/arena)
- [Bảng giá](https://spline.design/vi/pricing)
- [Doanh nghiệp](https://spline.design/vi/enterprise)

#### Runtime

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

#### Ứng dụng

- [Tải xuống](https://spline.design/vi/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Tải Spline Mirror](https://spline.design/download-mirror)

#### Học

- [Docs](https://docs.spline.design/)
- [Academy](https://spline.design/vi/academy)
- [Spline API](https://www.npmjs.com/package/@splinetool/runtime)
- [Giải pháp](https://spline.design/solutions)

#### Cộng đồng

- [Cộng đồng Spline](https://community.spline.design)
- [Blog](https://spline.design/vi/blog)
- [Changelog](https://spline.design/vi/changelog)
- [Giáo dục](https://spline.design/vi/education)
- [Contra](https://spline.design/contra)
- [Tiếp thị liên kết](https://spline.design/vi/affiliate)

#### Công ty

- [Khách hàng](https://spline.design/vi/customers)
- [Tuyển dụng](https://www.ycombinator.com/companies/spline/jobs)
- [Bảo mật](https://spline.design/vi/security)

#### Pháp lý

- [Điều khoản & Điều kiện](https://spline.design/terms)
- [Quyền riêng tư](https://spline.design/privacy)

#### Liên hệ

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

© 2026 - Spline, Inc.