Cách tạo: biểu tượng động

Học cách sử dụng biểu tượng để tạo hiệu ứng động.

sạc pin

Thử ngay

Bước 1 - Thêm HTML:

<div id="charging" class="fa"></div>

Bước 2 - Chèn thư viện biểu tượng Font Awesome:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Trong Hướng dẫn Font Awesome để biết thêm thông tin về Font Awesome.

Bước 3 - Thêm JavaScript:

<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>

Thử ngay

Giải thích ví dụ:

Ví dụ này để lại ấn tượng rằng pin đang được sạc, nhưng thực tế lại hiển thị năm biểu tượng khác nhau.

Một hàm có tên chargebattery() chức năng này chịu trách nhiệm thay thế và hiển thị tất cả các biểu tượng.

Hàm này đầu tiên hiển thị biểu tượng pin trống:

Sau một giây, biểu tượng này sẽ được thay thế bằng một biểu tượng mới:

Mỗi giây sẽ thay thế biểu tượng hiện tại bằng một biểu tượng mới, cho đến khi "điện pin đầy":

Quá trình này lặp lại mỗi 5 giây, làm cho người dùng cảm giác như pin đang được sạc.

Hơn nữa biểu tượng hoạt hình

Mô hình

Thử ngay

Mô hình

Thử ngay

Mô hình

Thử ngay

Mô hình

Thử ngay

Mô hình

Thử ngay

Mô hình

Thử ngay