Làm thế nào để tạo CSS động trực quan Với Stylie

Tạo hình động trên web có thể được dễ dàng và vui vẻ. Hướng dẫn: làm thế nào để tạo CSS động trực quan Với Stylie sẽ cho bạn thấy làm thế nào để sử dụng một công cụ gọi là Stylie để tạo ra hình ảnh động đẹp chỉ với con chuột của bạn.
Hình ảnh động CSSkeyframe là một bổ sung mạnh mẽ để vành đai công cụ bất kỳ dịch vụ thiết kế web. Trong nhiều trường hợp, họ dễ thực hiện hơn so với hình ảnh động dựa trên JavaScript, và họ cho phép chuyển động phức tạp hơn quá trình chuyển đổi CSS. Tuy nhiên, các APIkeyframe có thể là một chút thiếu cho hình ảnh động nhiều tham vọng hơn. Hơn nữa, nó có thể được khó khăn để một mất một hình ảnh động trong đầu của bạn và chuyển đổi nó thành mã, ngay cả khi các hình ảnh động là một trong những đơn giản. Để giải quyết những thách thức này, tôi đã phát triển một công cụ gọi là Stylie.

Stylie là một ứng dụng web đồ họa mã nguồn mở cho phép bạn dễ dàng tạo ra hình ảnh động CSSkeyframe. Nó giúp bạn trực quan xây dựng trình tự phức tạp trong vài phút mà thông thường sẽ mất thời gian để mã bằng tay. Cắt giảm thời gian cần thiết để mang lại ý tưởng của bạn với cuộc sống cũng làm lặp đi lặp lại dễ dàng hơn nhiều, cho phép bạn khám phá hiệu ứng hình ảnh mới thú vị mà mã hóa bằng tay sẽ không được.

CSS động trực quan Với Stylie

Hầu hết các hình ảnh động CSSkeyframe là tương đối đơn giản và chỉ có một vài bước sau:

@keyframes my-animation {

 0% {

   transform: translate(0px, 0px);

 }

 100% {

   transform: translate(300px, 200px);

 }

}




Tuy nhiên, CSSkeyframe thông số thực sự cho phép cho bất kỳ số lượng các khung hình trong một hình ảnh động:

@keyframes my-animation {

 0% {

   transform: translate(0px, 0px);

 }

 10% {

   transform: translate(30px, 15px);

 }

 20% {

   transform: translate(60px, 30px);

 }

 /* … */

 100% {

   transform: translate(300px, 150px);

 }

}

Bạn có thể tận dụng điều này để xây dựng các đường chuyển động cực kỳ phức tạp và tinh vi. Với đủ các khung hình, con đường làm mềm ra và các bước cá nhân trở nên không đáng kể. Nếu những điểm này được trải ra đúng giữa 0% và 100%, thậm chí bạn có thể mô phỏng hình ảnh động giảm bớt các đường cong. Hình ảnh động CSS điển hình cung cấp một tập hạn chế các lựa chọn giảm bớt, nhưng đúng khoảng cách ra các khung hình thiết lập để hình ảnh động thời gian chức năng: tuyến tính cho phép bạn đạt được bất kỳ đường cong mà bạn mong muốn. Đây là một kỹ thuật cực kỳ mạnh mẽ cho phép bạn tạo ra chỉ là về bất kỳ loại hình ảnh động mà bạn có thể mơ ước. Tuy nhiên, cố gắng để đạt được hiệu ứng này bằng cách viết codekeyframe cho ngay cả một chuyển động đơn giản sẽ mất thời gian, vì vậy tôi không khuyên bạn nên làm điều này bằng tay.

Sử dụng Stylie

Stylie được thiết kế web chuẩn seo để dễ sử dụng càng tốt. Khi bạn lần đầu tiên tải các ứng dụng, bạn sẽ thấy một quả bóng tạo hiệu ứng động trên một vòng giữa hai dấu thập.

Bạn có thể kéo các dấu thập xung quanh và các hình ảnh động sẽ cập nhật khi bạn tương tác với nó. Để thêm khung hình khác, hãy bấm vào nút + ở góc trên bên phải của cửa sổ kiểm soát màu xám đen, hoặc bấm phím K trên bàn phím của bạn. Bạn có thể thêm nhiều khung hình như bạn muốn.