动画图标

---

了解如何使用图标制作动画效果。

---

电池充电

亲自试一试 »

---

步骤 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 = "&#xf244;";
  setTimeout(function () {
    a.innerHTML = "&#xf243;";
  }, 1000);
  setTimeout(function () {
    a.innerHTML = "&#xf242;";
  }, 2000);
  setTimeout(function () {
    a.innerHTML = "&#xf241;";
  }, 3000);
  setTimeout(function () {
    a.innerHTML = "&#xf240;";
  }, 4000);
}
chargebattery();
setInterval(chargebattery, 5000);
</script> 亲自试一试 »

实例解析

该示例给人的印象是电池正在充电，但实际上显示了五个不同的图标。

一个名为 chargebattery() 的函数会完成所有图标的替换和显示。

函数首先显示一个空电池图标:



一秒钟后，图标被新图标替换:



图标每秒被一个新图标替换，直到"电池充满电":





此过程每 5 秒重复一次，使电池看起来像是在充电。

---

更多动画图标

实例

亲自试一试 »

实例

亲自试一试 »

实例

亲自试一试 »

实例

亲自试一试 »

实例

亲自试一试 »

实例

亲自试一试 »

---