Kho hiệu ứng CSS cho website với hơn 100 mẫu chia theo nhóm: nút bấm, hover, loader, hiệu ứng chữ, nền động, viền phát sáng, kính mờ, thẻ, form và nhiều hơn. Mỗi hiệu ứng có bản xem trước chạy thật, code HTML và CSS để chép, kèm prompt AI để tùy chỉnh theo ý bạn.
Đang tải thư viện hiệu ứng...
Câu hỏi thường gặp
Có. Bạn không cần đăng ký hay thanh toán để xem, chép code và prompt.
Bấm Xem code, chọn Chép HTML + CSS rồi dán vào website. Với WordPress hoặc Elementor, bạn có thể dán HTML vào widget HTML và phần CSS vào mục CSS tùy chỉnh. Tên class đều có tiền tố fx- nên ít bị trùng với CSS sẵn có, nhưng bạn vẫn nên thử trên bản nháp trước.
Prompt đã gồm mô tả hiệu ứng, yêu cầu kỹ thuật và code tham khảo. Bạn dán vào Claude, ChatGPT hoặc công cụ AI khác, thêm yêu cầu riêng như đổi màu, đổi tốc độ, đổi kích thước để AI viết lại code theo ý bạn. Nút Mở trong Claude và ChatGPT sẽ mở sẵn prompt ở tab mới, bạn cần đăng nhập ở đó.
Hầu hết chạy tốt trên trình duyệt hiện đại. Một số hiệu ứng dùng tính năng CSS mới như @property, backdrop-filter hoặc :has() nên có thể không hiển thị đúng trên trình duyệt cũ. Bạn nên thử trên các trình duyệt và thiết bị khách hàng của bạn hay dùng.
Các hiệu ứng ở đây ưu tiên transform và opacity nên khá nhẹ. Tuy vậy, nhiều animation chạy lặp vô hạn cùng lúc trên một trang vẫn có thể gây giật trên máy yếu, nên hãy dùng có chọn lọc. Phần lớn mẫu có sẵn đoạn prefers-reduced-motion để giảm chuyển động cho người dùng đã bật tùy chọn này.
Nhắn Nam để được tư vấn.
