如何 - 动画图标
了解如何使用图标制作动画效果。
电池充电
尝试一下 »
步骤 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 秒重复一次，使它看起来像电池正在充电。
