Chuyển đến nội dung chính
Uddatak

Công Cụ Tạo Hiệu Ứng CSS Keyframe

Công Cụ Tạo Hiệu Ứng CSS Keyframe cho phép bạn chọn loại hiệu ứng từ 12 kiểu có sẵn (hiện/mờ dần, trượt từ bốn hướng, phóng to/thu nhỏ, nảy vào, xoay vào, lật trên trục X hoặc Y), sau đó điều chỉnh thời lượng, độ trễ, hàm thời gian và số lần lặp, với bản xem trước trực tiếp và nút Phát Lại. Sao chép quy tắc @keyframes đầy đủ cùng với lớp hiệu ứng sẵn sàng sử dụng. Toàn bộ quá trình tạo diễn ra trên trình duyệt của bạn — không có gì từng được gửi đến máy chủ.

Công Cụ Thiết Kế và CSS Chạy hoàn toàn trong trình duyệt của bạn

Mã được tạo hoàn toàn trên trình duyệt của bạn — không có gì từng được gửi đến máy chủ.

Mã CSS

@keyframes uddatakAnim {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.animated-box {
  animation: uddatakAnim 800ms ease-out 0ms 1;
}

Câu Hỏi Thường Gặp

Có, @keyframes và thuộc tính animation được hỗ trợ trên mọi trình duyệt hiện đại mà không cần tiền tố nhà cung cấp đặc biệt.

Tiếp tục với

Hoàn toàn cục bộ

Trình tạo đường cong Easing Cubic Bezier

Kéo hai điểm để thiết kế trực quan một đường cong easing chuyển động tùy chỉnh và sao chép mã cubic-bezier.

Công Cụ Thiết Kế và CSSMở công cụ
Hoàn toàn cục bộ

Công Cụ Tạo Gradient CSS

Xây dựng trực quan một gradient CSS tuyến tính hoặc xuyên tâm và sao chép mã.

Công Cụ Thiết Kế và CSSMở công cụ
Hoàn toàn cục bộ

Trình tạo Clip-Path CSS

Chọn một hình dạng có sẵn (hình tròn, tam giác, ngôi sao, bong bóng tin nhắn...) và sao chép mã clip-path.

Công Cụ Thiết Kế và CSSMở công cụ

Công cụ liên quan

Hoàn toàn cục bộ

Công Cụ Tạo Bảng Màu Hài Hòa

Chọn một màu gốc và nhận bảng màu hài hòa (bổ túc, tương đồng, bộ ba, bộ bốn, đơn sắc).

Công Cụ Thiết Kế và CSSMở công cụ
Hoàn toàn cục bộ

Công Cụ Tạo Gradient Lưới

Tạo nền gradient lưới nhiều điểm mềm mại chỉ với một cú nhấp, và sao chép mã CSS sẵn sàng sử dụng.

Công Cụ Thiết Kế và CSSMở công cụ
Hoàn toàn cục bộ

Công Cụ Kiểm Tra Độ Tương Phản Màu

Kiểm tra xem một cặp màu văn bản/nền có đáp ứng tiêu chuẩn độ tương phản trợ năng WCAG hay không.

Công Cụ Thiết Kế và CSSMở công cụ
Hoàn toàn cục bộ

Công Cụ Tạo Gradient CSS

Xây dựng trực quan một gradient CSS tuyến tính hoặc xuyên tâm và sao chép mã.

Công Cụ Thiết Kế và CSSMở công cụ
Hoàn toàn cục bộ

Công Cụ Tạo Box-Shadow CSS

Thiết kế trực quan một box-shadow CSS bằng thanh trượt và sao chép mã được tạo ra.

Công Cụ Thiết Kế và CSSMở công cụ

Sẵn sàng dùng thử Uddatak?

Duyệt qua thư viện công cụ đầy đủ và bắt đầu sử dụng những gì bạn cần ngay bây giờ — miễn phí, không cần đăng ký.

Duyệt tất cả công cụ