LẬP TRÌNH WEB HTML - CSS - JAVA SCRIPT
LẬP TRÌNH WEB HTML - CSS - JAVA SCRIPT
BÀI 26: TẠO HIỆU ỨNG NHANH TRONG WEB JS
BÀI 26: TẠO HIỆU ỨNG NHANH TRONG WEB JS
Embedded Files
Mã nguồn và hướng dẫn ở đây nè: https://animate.style/
Đầu tiên, cài đặt nó vào thư mục dự án của bạn: Có 2 cách tùy theo bạn sử dụng công cụ nào (npm hoặc yarn)
npm install animate.css --save
yarn add animate.css
Tiếp theo là import vào file cần dùng. Cũng có 2 cách luôn
import 'animate.css';
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
Tiếp theo bạn vào mã nguồn trên và chọn hiệu mình cần sử dụng sau đó copy để lấy tên class của hiệu đó. Giống như bên dưới
<h1 class="animate__animated animate__bounce">An animated element</h1>
Cuối cùng, vào CSS và tùy chỉnh lại thời gian diễn ra hiệu ứng nữa là xong.
.animate__animated animate__bounce {
display: inline-block;
margin: 0 0.5rem;
animation: bounce; /* referring directly to the animation's @keyframe declaration */
animation-duration: 2s; /* don't forget to set a duration! */
}
Ngoài ra, còn có thể tùy chỉnh nhiều thứ khác và trong mã nguồn tác giả có hướng dẫn hết cả rồi.
Page updated
Google Sites
Report abuse