どう作成するか：アニメーションアイコン

アイコンを使ってアニメーション効果を作成する方法を学びます。

バッテリー充電

自分で試してみる

第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>

自分で試してみる

例説明：

この例では、バッテリーが充電されている印象を与えますが、実際には5つの異なるアイコンが表示されています。

名前が chargebattery() の関数

この関数は、すべてのアイコンの置き換えと表示を担当します。

1秒後、アイコンは新しいアイコンに置き換わります：

毎秒、現在のアイコンを新しいアイコンで置き換え、最終的に「バッテリーが充電完了」に至るまで続きます：

このプロセスは5秒ごとに繰り返され、バッテリーが充電されていると感じさせる。

さらにアニメーションアイコン

インスタンス

自分で試してみる

インスタンス

自分で試してみる

インスタンス

自分で試してみる

インスタンス

自分で試してみる

インスタンス

自分で試してみる

インスタンス

自分で試してみる