လုပ်နည်း - Animate Icons များ
ကာတွန်းအကျိုးသက်ရောက်မှုပြုလုပ်ရန် အိုင်ကွန်များကို အသုံးပြုနည်းကို လေ့လာပါ။
ဘက်ထရီအားသွင်းခြင်း။
အဆင့် 1) HTML ကိုထည့်ပါ
ဥပမာ
<div id="charging" class="fa"></div>
အဆင့် 2) Font Awesome Icon Library ကို ထည့်သွင်းပါ-
ဥပမာ
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
ကျွန်ုပ်တို့၏ Font Awesome Tutorial တွင် 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 စက္ကန့်တိုင်းတွင် ထပ်ခါထပ်ခါဖြစ်ပြီး ဘက်ထရီအားသွင်းနေပုံရသည်။
နောက်ထပ် ကာတွန်းအိုင်ကွန်များ
ဥပမာ
ဥပမာ
ဥပမာ
ဥပမာ
ဥပမာ
ဥပမာ