Skip to main content
Penguin ToolsCông cụ Chim Cánh Cụt

Tạo CSS Cubic Bezier

Tạo đường cong easing cho animation CSS một cách trực quan. Kéo các điều khiển và xem trước animation theo thời gian thực.

Cài đặt sẵn

Trình chỉnh sửa đường cong

P1(0.25, 0.10)
P2(0.25, 1.00)

Xem trước

Thời lượng

1.0s

Đầu ra

cubic-bezier(0.25, 0.10, 0.25, 1.00)
transition: all 1.0s cubic-bezier(0.25, 0.10, 0.25, 1.00);
Chia sẻ công cụ
📖

Cách sử dụng

Step 1

Điều chỉnh đường cong

Điều chỉnh đường cong

Kéo các điều khiển đường cong bezier

Step 2

Xem trước

Xem trước

Kiểm tra với xem trước animation

Step 3

Sao chép

Sao chép

Sao chép mã CSS để sử dụng

✨

Tính năng

Điều khiển kéo

Kéo các điểm điều khiển để điều chỉnh đường cong

Cài đặt sẵn

Cài đặt sẵn như ease, ease-in, ease-out

Xem trước animation

Xem trước easing với animation trực tiếp

❓

FAQ

Hàm easing xác định mô hình gia tốc của animation.

🔗Công cụ liên quan

🎨
Công Cụ Thiết Kế

Chuyển Đổi Mã Màu

Chuyển đổi giữa mã màu HEX, RGB và HSL. Sử dụng bộ chọn màu và xem trước thời gian thực để chọn màu trực quan.

🎨
Công Cụ Thiết Kế

Bảng Chọn Màu

Chọn màu trực quan bằng bánh xe màu và thanh trượt. Lấy và sao chép mã màu ở định dạng HEX, RGB và HSL.

🎨
Công Cụ Thiết Kế

Trích xuất màu từ ảnh

Tự động phát hiện màu chủ đạo từ ảnh và tạo bảng màu. Bạn cũng có thể nhấp vào bất kỳ điểm nào trên ảnh để lấy màu riêng lẻ.

🎯
Công Cụ Thiết Kế

Lấy màu trung bình từ ảnh

Tính màu trung bình của toàn bộ ảnh hoặc vùng được chọn. Hữu ích để chọn bảng màu hoặc màu nền cho thumbnail.

🌈
Công Cụ Thiết Kế

Tạo CSS Gradient

Tạo CSS gradient trực quan bằng điều khiển kéo. Hỗ trợ loại gradient tuyến tính, hướng tâm và hình nón với cài đặt sẵn.

🔲
Công Cụ Thiết Kế

Tạo CSS Box Shadow

Tạo CSS box-shadow trực quan bằng thanh trượt. Hỗ trợ nhiều bóng đổ và bóng đổ bên trong (inset).