Tạo hiệu ứng cho Font Awesome

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

Download Source

Related Post


Một số điểm mới trong bootstrap 4 alpha
Wednesday, July 13, 2016
Mình bắt đầu tìm hiểu sử dùng bootstrap từ 2013, và cái project đầu tiên sử dụng bootstrap của mình chính là blog này của mình. Sau 3 năm sử dụng thì giờ cảm thấy thực sự tuyệt vời và không thể thiếu nó. Vào ở thời điểm hiện tại thì bootstrap vẫn là CSS Framework được sử dụng nhiều nhất trên thế giới. Các project gần đây mình vẫn chủ yếu sử dụng bootstrap v3, nhưng gần đây có tìm hiểu v4 alpha để xem có gì hay ho hơn không.
CSS Media Queries for iPads & iPhones
Tuesday, May 3, 2016
Đã nhiều lần tôi phải thiết kế những website responsive có yêu cầu xử lý giao diện đặc biệt cho từng thiết bị bằng cách sử dụng CSS media queries. Bời vì vậy tôi đã tổng hợp lại một danh sách CSS Media Queries cho một số thiết bị tiêu biểu trong 2 năm qua. Tôi chia sẻ danh sách Media Queries với mục đích giúp cho designers và developers tiết kiệm thời gian tìm kiếm...
Search

Đăng ký nhận bài mới


Category

Blog Archive