📈 Một bộ công cụ,
mọi nhiệm vụ thiết kế

Trình tạo Cubic Bezier

Thiết kế đường cong easing CSS tùy chỉnh với bản xem trước trực tiếp và hoạt ảnh. Kéo điểm điều khiển, chọn từ cài đặt sẵn và sao chép hàm cubic-bezier() ngay lập tức.

English 中文 日本語 한국어 Español Português Français Deutsch العربية हिन्दी ไทย Tiếng Việt Bahasa Русский

📈 Trình tạo Cubic Bezier

Hướng dẫn Cubic Bezier

cubic-bezier() là hàm định thời CSS xác định cách hoạt ảnh tăng tốc và giảm tốc. Bốn giá trị của nó — x1, y1, x2, y2 — là hai điểm điều khiển của đường cong ánh xạ thời gian với tiến trình. Trục X biểu diễn thời gian (0 đến 1) và trục Y biểu diễn tiến trình hoạt ảnh.

Chọn cài đặt sẵn hoặc kéo các điểm điều khiển màu cam trên khung vẽ để tạo hình đường cong easing. Quả bóng chuyển động cho thấy chính xác cảm giác định thời, và CSS đầu ra sẵn sàng dán vào bất kỳ transition hay animation nào.

Pro Tips

Frequently Asked Questions

Q: cubic-bezier trong CSS là gì?
cubic-bezier trong CSS là gì? Đó là hàm định thời dùng trong transition và animation, xác định đường cong tốc độ: hoạt ảnh tiến triển nhanh thế nào theo thời gian. Giá trị mặc định là cubic-bezier(0.25, 0.1, 0.25, 1), còn gọi là ease.
Q: Các giá trị easing chuẩn là gì?
Các giá trị easing chuẩn là gì? ease = (0.25, 0.1, 0.25, 1), ease-in = (0.42, 0, 1, 1), ease-out = (0, 0, 0.58, 1), ease-in-out = (0.42, 0, 0.58, 1), linear = (0, 0, 1, 1).
Q: Tạo hiệu ứng nảy thế nào?
Tạo hiệu ứng nảy thế nào? Đẩy giá trị Y vượt quá 1, như cubic-bezier(0.34, 1.56, 0.64, 1). Đường cong vượt mục tiêu trong chốc lát rồi quay lại — cú nảy kiểu lò xo.
Q: Vì sao hoạt ảnh trông hỏng khi Y âm?
Vì sao hoạt ảnh trông hỏng khi Y âm? Y âm tạo sự chờ đợi (anticipation) — phần tử lùi lại trước khi tiến lên. Có chủ đích cho hiệu ứng back-easing nhưng trông sai với hầu hết chuyển đổi nội dung.
Q: Có thể dùng cubic-bezier trong hoạt ảnh không?
Có thể dùng cubic-bezier trong hoạt ảnh không? Có, cả trong transition lẫn @keyframes animation, qua thuộc tính timing-function. Cũng áp dụng cho hoạt ảnh liên kết cuộn.

Màu sắc Việt Nam

Từ màu son đỏ của đình chùa đến màu nâu đất của làng quê, màu sắc Việt Nam gắn liền với lịch sử, nông nghiệp lúa nước và trang phục truyền thống áo dài.

Đỏ son #E32636

Màu son của cổng làng, đình chùa và câu đối

Vàng hoàng thái #FFD700

Màu vàng của hoàng cung và lễ hội

Xanh lam #0056A7

Màu xanh của biển Đông

Màu gạch #B22222

Màu gạch nung của làng quê Bắc Bộ

Vàng nắng #F7C948

Ánh nắng vàng trên cánh đồng lúa chín

Xanh ngọc #00A86B

Màu ngọc bích của vịnh Hạ Long

Tím Huế #7F5FA3

Màu tím của áo dài và hoa phượng tím xứ Huế

Nâu đất #8B5A2B

Màu đất phù sa của đồng bằng sông Hồng

Hồng sen #F5A9B8

Màu hoa sen — quốc hoa của Việt Nam

Trắng ngà #FFFFF0

Màu áo dài trắng của nữ sinh

Q: Màu đỏ son là gì?
Màu đỏ son là gì? Màu đỏ son (#E32636) là màu đỏ truyền thống được dùng để sơn cổng làng, đình chùa và câu đối Tết ở Việt Nam, tượng trưng cho may mắn và thịnh vượng.
Q: Màu tím Huế là gì?
Màu tím Huế là gì? Tím Huế (#7F5FA3) là màu tím đặc trưng của xứ Huế, gắn liền với áo dài tím, hoa phượng tím và nét lãng mạn của cố đô.