- Messages
- 585
- Points
- 10
- Language
- Tiếng Việt
Tôi có viết một bài về sử dụng thư viện iHover để tạo các hiệu ứng hover đẹp mắt trên website, các bạn có thể xem tại bài viết "Tạo hiệu ứng hover với thư viện iHover". Ngoài thư viện iHover thì các bạn cũng có thể sử dụng thêm thư viện Hover.css để bổ sung thêm các hiệu ứng hover khác.
Thư viện Hover.css cho phép các bạn thêm các hiệu ứng di chuyển chuột vào mọi thành phần, chẳng hạn như một nút, liên kết hoặc hình ảnh. Các hiệu ứng bao gồm quá trình chuyển đổi 2D, quá trình chuyển đổi nền, biên, bóng, ánh sáng chuyển tiếp, và nhiều hơn thế nữa. Thư viện bao gồm các tập tin CSS, LESS và SASS.
Để sử dụng thư viện Hover.css, các bạn cần phải tải thư viện tại địa chỉ https://github.com/IanLunn/Hover.
Các bạn tích hợp thư viện Hover.css vào website với dòng lệnh như sau:
Và tạo hiệu ứng hover trên một liên kết với nội dung mã lệnh như sau:
Lớp CSS
Các bạn có thể tìm hiểu thêm các hiệu ứng hover khác của thư viện Hover.css tại địa chỉ http://ianlunn.github.io/Hover.
Thư viện Hover.css cho phép các bạn thêm các hiệu ứng di chuyển chuột vào mọi thành phần, chẳng hạn như một nút, liên kết hoặc hình ảnh. Các hiệu ứng bao gồm quá trình chuyển đổi 2D, quá trình chuyển đổi nền, biên, bóng, ánh sáng chuyển tiếp, và nhiều hơn thế nữa. Thư viện bao gồm các tập tin CSS, LESS và SASS.
Để sử dụng thư viện Hover.css, các bạn cần phải tải thư viện tại địa chỉ https://github.com/IanLunn/Hover.
Các bạn tích hợp thư viện Hover.css vào website với dòng lệnh như sau:
HTML:
<link href="path/to/hover.css" rel="stylesheet">
HTML:
<a href="#" class="hvr-grow">Gextend</a>hvr-grow là một hiệu ứng của thư viện Hover.css đã được định nghĩa và liên kết chỉ là một trong các thành phần mà các bạn có thể tạo hiệu ứng hover.Các bạn có thể tìm hiểu thêm các hiệu ứng hover khác của thư viện Hover.css tại địa chỉ http://ianlunn.github.io/Hover.