Font Awesome Animation là một thư viện css cho phép chúng ta tạo các hiệu ứng rất sinh động cho glyphicons (như Font Awesome Icon) bằng cách sử dụng các thuộc tính của CSS3 như transforms, animations và keyframes. Hỗ trợ hầu hết cho các trình duyệt hiện đại và trình duyệt trên mobile.Các bạn có thể download thư viện Font Awesome Animation tại đây:
https://github.com/l-lin/font-awesome-animation
Sau khi download thư viện về, ta thêm vào <head> của trang
<link rel="stylesheet" href="../src/font-awesome-animation.css">
Font Awesome Animation cho phép chúng ta một số lưạ chọn như chạy hiệu ứng ngay khi trang tải xong, chạy hiệu ứng khi hover lên đối tượng hoặc chạy khi hover lên đối tượng cha chứa nó.
1. Chạy hiệu ứng ngay khi load trang
<i class='fa fa-bell faa-ring animated fa-4x'></i>
Auto Animated
2. Chạy hiệu ứng khi hover lên đối tượng
<i class='fa fa-bell faa-ring animated-hover'></i>
Hover On Ring Icon
3. Chạy hiệu ứng khi hover lên đối tượng chứa nó
- Đối với trường hợp này, các bạn cần thêm class="faa-parent animated-hover" lên đối tượng parent chứa nó.<a href="#" class="faa-parent animated-hover">
<i class="fa fa-bell faa-ring"></i>
Hover On Me
</a>
Hover On Me Font Awesome Animation còn rất nhiều hiệu ứng đẹp mắt khác nữa, các bạn xem ở link dưới
View Demo
Bình luận Blogger
● Comment có văn hóa: Không chửi tục, nói bậy, thông qua khung Comment.
● Với tên "ẩn danh" thì bạn tích vào ô: "chứng minh bạn không phải là rô-bốt".
● Để bình luận một đoạn code, bạn click vào đây để mã hóa code trước nhé !
● Để đăng ảnh làm hình minh họa, bạn click vào đây để Upload ảnh lên sever nhé !
0 nhận xét | Viết lời bình