Nasıl oluşturulur: Animasyon simgesi

Simgelerle animasyon efekti nasıl oluşturulur öğrendiğiniz.

Pil Şarj

Kişisel olarak deneyin

İlk adım - HTML ekleyin:

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

İkinci adım - Font Awesome simge kütüphanesini içe aktarın:

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

İçerisinde Font Awesome rehberi ile Font Awesome hakkında daha fazla bilgi edinin.

Üçüncü adım - JavaScript ekleyin:

<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>

Kişisel olarak deneyin

Örnek açıklaması:

Bu örnek pilin şarj edildiği izlenimini verir, ancak aslında beş farklı simge gösterir.

Adı chargebattery() tüm simgelerin değiştirilmesi ve gösterilmesi için sorumludur.

Bu fonksiyon öncelikle bir boş pil simgesi gösterir:

Bir saniye sonra, bu simge yeni bir simge ile değiştirilir:

Her saniye mevcut simgeyi yeni bir simge ile değiştirir,

Bu süreç her 5 saniyede bir tekrar eder ve pilin şarj edildiği izlenimini verir.

Daha fazla animasyon ikonu

Örnek

Kişisel olarak deneyin

Örnek

Kişisel olarak deneyin

Örnek

Kişisel olarak deneyin

Örnek

Kişisel olarak deneyin

Örnek

Kişisel olarak deneyin

Örnek

Kişisel olarak deneyin