كيف - تحريك الأيقونات
تعرف على كيفية استخدام الرموز لعمل تأثير متحرك.
البطارية تشحن
الخطوة 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>
شرح المثال
يعطي المثال انطباعًا عن بطارية يتم شحنها ، ولكن بدلاً من ذلك يتم عرض خمسة رموز مختلفة.
وظيفة تسمى chargebattery()
كل استبدال وعرض الرموز.
تبدأ الوظيفة بعرض رمز بطارية فارغة:
بعد ثانية واحدة ، يتم استبدال الرمز برمز جديد:
يتم استبدال الرمز برمز جديد كل ثانية ، حتى "يتم شحن البطارية بالكامل":
تتكرر هذه العملية كل 5 ثوانٍ ، مما يبدو وكأن البطارية قيد الشحن.
المزيد من الرموز المتحركة
مثال
مثال
مثال
مثال
مثال
مثال