如何创建:动画图标

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

电池充电

亲自试一试

第一步 - 添加 HTML:

第二步 - 包含 Font Awesome 图标库:


在我们的 Font Awesome 教程 中了解有关 Font Awesome 的更多信息。

第三步 - 添加 JavaScript:


亲自试一试

例子解释:

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

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

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

一秒钟后,该图标被一个新图标替换:

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



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

更多动画图标

实例

亲自试一试

实例

亲自试一试

实例

亲自试一试

实例

亲自试一试

实例

亲自试一试

实例

亲自试一试