Hướng dẫn sử dụng công cụ animate.css
1. Giới thiệu
Animate.css là thư viện animation được viết sẵn bằng css. Hỗ trợ rất hữu ích cho chúng ta phát triển hiệu ứng website.
- Trang web: https://daneden.github.io/animate.css/
- Document: https://github.com/daneden/animate.css
2. Cách sử dụng
Bước 1: Đầu tiên bạn tạo html như bình thường.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> <div class="div-animation" style="background-color: #ccc; width: 300px; height: 200px"> noi dung the div </div> </body> </html>
Bước 2: Gắn link sau vào phần thẻ head
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
Bước 3: Vào trang https://daneden.github.io/animate.css/ chọn hiệu ứng cho phù hợp
Bước 4: Lấy tên của animation gắn vào thuộc tính animaion-name trong chỗ định dạng element của bạn.
.div-animation {
animation-name: bounce; //tên của animation
animation-duration: 3s; // thời gian thực hiện hiệu ứng
margin: 0px auto;
}Toàn bộ code chương trình sẽ như sau:
<!--Này mình sử dụng hiệu ứng zoomIn -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
</head>
<style>
.div-animation {
animation-name: zoomIn;
animation-duration: 3s;
margin: 0px auto;
}
</style>
<body>
<div class="div-animation" style="background-color: #ccc; width: 300px; height: 200px">
noi dung the div
</div>
</body>
</html>Kết Luận
Thư viện này cũng dễ sử dụng và hữu ích phải không nào? Cảm ơn các bạn đã đọc bài viết. Nếu có thắc mắc gì cứ để lại bình luận bên dưới nhé!