كيفية إنشاء: شعار ديناميكي

تعلم كيفية استخدام الرسومات لإنشاء تأثيرات مذهلة.

شحن البطارية

جرب بنفسك

الخطوة الأولى - إضافة 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 ثواني، مما يجعلك تشعر بأن البطارية تُشحن.

المزيد من أيقونات الرسم المتحرك

مثال

جرب بنفسك

مثال

جرب بنفسك

مثال

جرب بنفسك

مثال

جرب بنفسك

مثال

جرب بنفسك

مثال

جرب بنفسك