Làm thế nào để - Tạo các biểu tượng hoạt hình
Tìm hiểu cách sử dụng các biểu tượng để tạo hiệu ứng động.
Sạc pin
Bước 1) Thêm HTML:
Thí dụ
<div id="charging" class="fa"></div>
Bước 2) Bao gồm Thư viện Biểu tượng Font Awesome:
Thí dụ
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Đọc thêm về Font Awesome trong Hướng dẫn về Font Awesome của chúng tôi .
Bước 3) Thêm JavaScript:
Thí dụ
<script>
function chargebattery() {
var a;
a = document.getElementById("charging");
a.innerHTML = "";
setTimeout(function () {
a.innerHTML = "";
}, 1000);
setTimeout(function () {
a.innerHTML = "";
}, 2000);
setTimeout(function () {
a.innerHTML = "";
}, 3000);
setTimeout(function () {
a.innerHTML = "";
}, 4000);
}
chargebattery();
setInterval(chargebattery, 5000);
</script>
Giải thích ví dụ
Ví dụ này tạo ấn tượng về một viên pin đang được sạc, nhưng thay vào đó là năm biểu tượng khác nhau được hiển thị.
Một chức năng được gọi là chargebattery()
thực hiện tất cả việc thay thế và hiển thị các biểu tượng.
Chức năng bắt đầu bằng cách hiển thị biểu tượng pin trống:
Sau một giây, biểu tượng được thay thế bằng một biểu tượng mới:
Biểu tượng này được thay thế bằng một biểu tượng mới mỗi giây, cho đến khi "pin được sạc đầy":
Quá trình này được lặp lại sau mỗi 5 giây, khiến nó có vẻ như đang sạc pin.
Thêm các biểu tượng hoạt hình
Thí dụ
Thí dụ
Thí dụ
Thí dụ
Thí dụ
Thí dụ