Stylie - Trình tạo hoạt hình web CSS miễn phí

Nếu bạn vật lộn với cú pháp CSS3 và muốn một cách đơn giản để tạo hình ảnh động Máy tạo kiểu là một công cụ tuyệt vời để tiết kiệm.

Đây là một trong nhiều máy tạo mã tập trung vào các hiệu ứng hoạt hình CSS thuần túy. Stylie hoàn toàn miễn phí và có nguồn mở, được lưu trữ trên GitHub và được cung cấp bởi thư viện keyframe có tên Rekapi.

Thư viện Rekapi không sử dụng JavaScript, vì vậy nó là một sự thay thế cho CSS thuần túy. Và rất may, ứng dụng web Stylie hỗ trợ cả hai phương pháp, vì vậy bạn có thể xuất mã bằng CSS hoặc JavaScript thuần.

Theo mặc định, trang đầu tiên tải bản demo hoạt hình liên tục với hình động tuyến tính. Bạn có thể chơi với điều này bằng cách chỉnh sửa thiết lập mặc định bên trong Tab chuyển động hoặc bằng cách chỉnh sửa Tab khung hình chính.

Trong danh sách khung hình chính, bạn có thể thêm các khung hình mới, chỉnh sửa tổng thời lượng của họ, và thay đổi phong cách hoạt hình, bao gồm các chuyển động dựa trên trục X / Y.

Đầu tiên, cái này sẽ nhìn vô cùng khó hiểu, đặc biệt là nếu bạn chưa bao giờ thực hiện hoạt hình keyframe trước đây. Tuy nhiên, bạn càng chơi với ứng dụng này, nó càng có ý nghĩa.

Theo mặc định, bạn sẽ có rất nhiều lựa chọn nới lỏng khác nhau gây rối và tất cả đều siêu dễ dàng để tùy chỉnh.

Các Đồ thị chuyển động khó học hơn rất nhiều nhưng nó cho phép bạn kiểm soát nhiều hơn đối với việc nới lỏng hoạt hình của mình. Stylie thậm chí cho phép bạn lưu hiệu ứng chuyển động tùy chỉnh và tái sử dụng trong tab Keyframes cho các hình động khác.

Nếu tôi có thể phàn nàn về một điều thì đó là ứng dụng web thiếu thiết kế đáp ứng.

Tôi không thể đặt toàn bộ ứng dụng vừa với màn hình MacBook Pro 13 "của mình ngay cả khi trình duyệt được tối đa hóa tối đa. Đây có thể là một vấn đề do trang không có thanh cuộn dọc và nhiều tùy chọn (như mã xuất khẩu) được tìm thấy thấp hơn trong khung cài đặt.

Nhưng ngoài sự phiền toái nhỏ này, tôi đã làm cho nó hoạt động tốt trên màn hình lớn hơn của mình. Và chất lượng xuất khẩu giống như không có gì khác bạn sẽ tìm thấy trên web.

Hãy xem qua ứng dụng Stylie để xem nó hoạt động như thế nào và thử nghịch với một số tùy chọn. Một khi bạn thực hiện hoạt hình của mình, bạn có thể xuất CSS hoặc JavaScript và sử dụng nó cho bất kỳ dự án nào bạn thích.

Nếu bạn gặp khó khăn khi học giao diện, bạn cũng có thể xem hướng dẫn ngắn gọn này kéo dài khoảng 9 phút và bao gồm tất cả các tính năng chính.