कैसे बनाया जाता है: एनिमेशन आइकन

आइकन के जरिए एनिमेशन बनाना सीखें。

बैटरी चार्ज

स्वयं आयात्रा करें

पहला चरण - 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 शिक्षा में 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 सेकंड फिर से दोहराई होती है और इससे लगता है कि बैटरी भर रही है。

और अन्य एनिमेशन आइकन

इन्स्टैंस

स्वयं आयात्रा करें

इन्स्टैंस

स्वयं आयात्रा करें

इन्स्टैंस

स्वयं आयात्रा करें

इन्स्टैंस

स्वयं आयात्रा करें

इन्स्टैंस

स्वयं आयात्रा करें

इन्स्टैंस

स्वयं आयात्रा करें