วิธีที่จะทำ

เรียนรู้ว่าจะใช้ไอคอนเพื่อทำแอนิเมชัน

การฝังหลังไฟฟ้า

亲自试一试

ขั้นที่ 1 - เพิ่ม HTML:

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

ขั้นที่ 2 - รวมไลบรารี Font Awesome อิคอน:

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

ใน Font Awesome 教程 ได้รับข้อมูลเพิ่มเติมเกี่ยวกับ Font Awesome ในนี่

ขั้นที่ 3 - เพิ่ม 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>

亲自试一试

ชี้แจงตัวอย่าง

ตัวอย่างนี้ทำให้มีความรู้สึกว่าหลังไฟฟ้ากำลังถูกฝัง แต่ในความเป็นจริงแสดงไอคอนที่แตกต่างกัน 5 ตัว

ฟังก์ชันที่มีชื่อ chargebattery() ฟังก์ชันนี้รับผิดชอบการแทนที่และแสดงไอคอนทั้งหมด

ฟังก์ชันนี้จะแสดงไอคอนหลังไฟฟ้าว่างเปล่าเป็นแรก

หลังจากหนึ่งวินาที ไอคอนนี้จะถูกแทนด้วยไอคอนใหม่

แสดงไอคอนใหม่แทนไอคอนปัจจุบันทุกวินาที จนถึงจุดที่“หลังไฟฟ้าทันที่”

กระบวนการนี้จะซ้ำทุก 5 วินาที ทำให้มีความรู้สึกว่าหลังไฟฟ้ากำลังถูกฝัง

更多动画图标

实例

亲自试一试

实例

亲自试一试

实例

亲自试一试

实例

亲自试一试

实例

亲自试一试

实例

亲自试一试