ఎలా తయారు చేయాలి: అనిమేషన్ ఐకాన్

ఐకాన్లతో అనిమేషన్ ప్రాభావం తెలుసుకోండి.

బ్యాటరీ లోడింగ్

亲自试一试

మొదటి అడుగు - HTML జోడించండి:

<div id="charging" class="fa"></div>

రెండవ అడుగు - Font Awesome ఐకాన్ లైబ్రరీని చేర్చండి:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

మా Font Awesome 教程 ఫాంట్ అవేర్ గురించి మరింత సమాచారం తెలుసుకోండి.

మూడో అడుగు - 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 సెకనులు ఒకసారి పునరావృతం అవుతుంది, దాని ఫలితంగా బ్యాటరీ లోడింగ్ అవుతోందని భావించబడుతుంది。

更多动画图标

实例

亲自试一试

实例

亲自试一试

实例

亲自试一试

实例

亲自试一试

实例

亲自试一试

实例

亲自试一试