如何创建：动画图标

学习如何使用图标来制作动画效果。

电池充电

亲自试一试

第一步 - 添加 HTML：

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

第二步 - 包含 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 的更多信息。

第三步 - 添加 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>

亲自试一试

例子解释：

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

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

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

一秒钟后，该图标被一个新图标替换：

每秒都会用一个新的图标替换当前图标，直到“电池充满电”：

这个过程每 5 秒重复一次，让人感觉电池正在充电。

更多动画图标

实例

亲自试一试

实例

亲自试一试

实例

亲自试一试

实例

亲自试一试

实例

亲自试一试

实例

亲自试一试