如何製作圖示動畫
瞭解如何使用圖示製作動畫效果。
電池充電
自己動手試一試 »
步驟 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>
自己動手試一試 »
示例解釋
該示例給人一種電池正在充電的印象，但實際上是顯示了五種不同的圖示。
一個名為 chargebattery() 的函式負責所有圖示的替換和顯示。
該函式首先顯示一個空的電池圖示
一秒鐘後，圖示被替換為一個新圖示
每個圖示每秒被替換為一個新圖示，直到“電池充滿電”
這個過程每 5 秒重複一次，看起來就像電池在充電。
