目录

如何 - 动画图标

❮ 上一节下一节 ❯

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

电池充电

亲自试一试 »

步骤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 的更多信息字体真棒教程。

步骤 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()完成所有图标的替换和显示。

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

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

该图标每秒都会被一个新图标替换，直到"the battery is fully charged"：

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

更多动画图标

示例

亲自试一试 »

示例

亲自试一试 »

示例

亲自试一试 »

示例

亲自试一试 »

示例

亲自试一试 »

示例

亲自试一试 »

❮ 上一节下一节 ❯