如何創建：動畫圖標

學習如何使用圖標來制作動畫效果。

電池充電

親自試一試

第一步 - 添加 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 秒重復一次，讓人感覺電池正在充電。

更多動畫圖標

實例

親自試一試

實例

親自試一試

實例

親自試一試

實例

親自試一試

實例

親自試一試

實例

親自試一試