Share Tạo hiệu ứng hoạt hình đẹp với thư viện Infinite

[filiallion]

Language

Tiếng Việt

Với sức mạnh của CSS3 các bạn có thể dễ dàng tạo ra nhiều hiệu ứng hoạt hình mà không cần phải dùng tới hình ảnh hay JavaScript. Các hiệu ứng hoạt hình như hiệu ứng loading, nhấp nháy... sẽ tạo điểm nhấn cho website, góp phần làm cho website trở nên chuyên nghiệp hơn. Bài viết này tôi giới thiệu với các bạn thư viện Infinite dùng để tạo ra các hiệu ứng hoạt hình lặp vô tận như hiệu ứng xoay, mờ nhạt...

Infinite là một thư viện CSS nhỏ gọn nên việc sử dụng nó cũng vô cùng đơn giản, các bạn chỉ việc khai báo các class CSS đã được định nghĩa là sẽ áp dụng được hiệu ứng. Để sử dụng thư viện Infinite, các bạn tải tại địa chỉ https://github.com/tilomitra/infinite và tích hợp vào website với dòng mã lệnh HTML như sau:

<link href="path/to/infinite.css" rel="stylesheet">

Bây giờ, các bạn thử tạo một hiệu ứng lặp vô tận với thư viện Infinite như sau:

<img src="path/to/image.jpg" class="rotating-css">

Các bạn có thể xem demo và tìm hiểu thêm cách sử dụng thư viện Infinite tại địa chỉ http://tilomitra.github.io/infinite.