Tăng hiệu quả thiết kế website bằng các CSS Animation

Thứ sáu - 29/04/2016 09:15

CSS Animation sẽ hỗ trợ bạn tạo ra hình ảnh động mà không cần sử dụng đển flash và JavaScript trong các trang web. Từ đó, hỗ trợ tốc độ tải web cũng như tăng hiệu quả của thiết kế website.

thiết kế website bằng các CSS Animation

Thiết kế website của bạn sẽ trở nên cực kỳ sinh động với những biểu tượng động vật theo phong cách hoạt hình vui nhộn của Pankaj Taneja.

Để thiết kế website có giao diện trực quan và hình ảnh động ấn tượng, bạn không nhất thiết phải sử dụng các phần mềm chỉnh sửa hình ảnh. Việc sử dụng phần mềm chỉnh sửa hình ảnh sẽ ảnh hưởng và làm giảm tốc độ tải của website. Để giải quyết vấn đề này, bạn có thể tạo các CSS3 Animation được đánh dấu toàn bộ và đây chính xác là điều Pankaj Taneja đã thực hiện với những biểu tượng hình ảnh động vật cực kỳ đáng yêu của mình.

Các CSS Animal đơn thuần là một bộ sưu tập các hình ảnh động vật, con người và biểu tượng được hoạt hình hóa và tất cả đều được sáng tạo bởi CSS. Được sáng tạo nguyên bản như một phương pháp kiểm nghiệm các tính năng của HTML và CSS, Pankaj Taneja đã tải một số thiết kế của mình lên Codepen. Người dùng có thể tải về và thử nghiệm miễn phí trên trang Codepen với đường link: http://codepen.io/pankajunk/pen/YXbYrK

Được hỗ trợ bởi tất cả các trình duyệt hiện đại, những hình ảnh động đáng yêu này hoàn toàn linh hoạt và hiển thị tốt trên màn hình máy tính, màn hình điện thoại cũng như màn hình máy tính bảng. CSS Animation sẽ giúp thiết kế web của bạn trở nên sinh động và thu hút hơn.

Những biểu tượng đáng yêu này sẽ sống dậy khi bạn di con trỏ chuột vào biểu tượng.

Dưới đây là một số CSS Animals của Pankaj Taneja:

1. W..who goes....there?

Áo choàng của vị chiến binh này sẽ hoàn toàn biến mất khi bạn để con trỏ chuột vào biểu tượng.
thiết kế website bằng các CSS Animation W..who goes....there?

2. Toady

Bạn có thể cảm thấy thư giãn khi chú ếch nổi trên mặt nước sẽ di chuyển dần về phía bông hoa nếu con trỏ chuột của bạn đặt trên mặt nước.
thiết kế website bằng các CSS Animation Toady

3. Manimal

Gã này sẽ đi dọc theo màn hình và chỉ ngừng lại khi bạn bỏ con trỏ chuột ra vị trí khác.
thiết kế website bằng các CSS Animation Manimal

4. Windy Wilma

Chú cá voi sẽ nhắm mắt và di chuyển đuôi của mình khi bạn để con trỏ chuột vào người cá voi.
thiết kế website bằng các CSS Animation Windy Wilma

Bạn có thể tham khảo thêm các thiết kế website bằng các CSS Animation khác của Pankaj Taneja tại http://www.cssanimals.com/

Hãy sử dụng những biểu tượng minh họa sinh động, ngộ nghĩnh nhưng mang lại hiệu quả cao đối với thiết kế website của bạn.

Chúc các bạn vui vẻ.

Tác giả bài viết: Hằng Nguyễn
Nguồn tin: NGÔI SAO SỐ web & brand solutions