Bagaimana untuk Mencipta Animasi Gelung Pudar Infinite untuk Teks \'Memuatkan\' dengan CSS?

Animasi CSS Mudah: Gelung Pudar Infinite untuk "Memuatkan" Teks

Untuk mencapai animasi gelung lancar untuk teks yang pudar masuk dan keluar berulang kali , kami mendalami dunia animasi CSS. Walaupun percubaan awal menyediakan rangka kerja rangka, ia tidak mempunyai kehalusan yang diperlukan untuk memaparkan animasi merentas pelbagai penyemak imbas.

Merapatkan Pembahagian Penyemak Imbas: Mengawal Animasi

Kuncinya untuk memastikan keserasian merentas pelayar terletak pada awalan khusus pelayar. Awalan ini mengarahkan pelayar yang berbeza untuk mentafsir animasi dengan cara yang konsisten. Kod berikut menggabungkan awalan ini:

<code class="css">@keyframes flickerAnimation {
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-o-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-moz-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-webkit-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}

.animate-flicker {
   -webkit-animation: flickerAnimation 1s infinite;
   -moz-animation: flickerAnimation 1s infinite;
   -o-animation: flickerAnimation 1s infinite;
    animation: flickerAnimation 1s infinite;
}</code>

Menggunakan Animasi: Memudar Teks "Memuatkan"

Untuk menggunakan animasi, kami hanya menambah "animate- flicker" ke kelas elemen yang mengandungi teks yang kami ingin hidupkan:

<code class="html"><div class="animate-flicker">Loading...</div></code>

Lihat Gelung yang Memukau: Menonton Teks Pudar

Dengan sentuhan terakhir ini, anda akan menyaksikan gelung teks pudar yang tidak berkesudahan, didorong sepenuhnya oleh CSS, memberikan isyarat visual yang halus namun menawan untuk menunjukkan proses pemuatan.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Animasi Gelung Pudar Infinite untuk Teks \'Memuatkan\' dengan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!