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

Mencipta Gelung Animasi CSS sahaja untuk Memudar Teks "Memuatkan"

Dalam tutorial ini, kami bertujuan untuk mencipta animasi CSS yang menyerupai teks "Memuatkan" yang pudar tanpa menggunakan JavaScript.

Pernyataan Masalah:

Anda telah mencipta animasi CSS asas menggunakan bingkai utama, tetapi ia tidak bergelung dan pudar masuk dan keluar tak terhingga.

Penyelesaian:

Untuk mencipta animasi gelung, tambahkan sifat-sifat animasi-iteration-count dan animasi-direction. animation-iteration-count menentukan bilangan kali animasi perlu diulang, manakala animasi-direction menentukan sama ada animasi harus dimainkan ke hadapan atau ke belakang.

Seterusnya, anda mesti memasukkan awalan khusus penyemak imbas untuk keserasian yang lebih baik.

Kod yang diubah suai di bawah menggabungkan perubahan 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 normal;
  -moz-animation: flickerAnimation 1s infinite normal;
  -o-animation: flickerAnimation 1s infinite normal;
  animation: flickerAnimation 1s infinite normal;
}</code>

Penggunaan:

Gunakan kelas animasi-kerlipan pada elemen yang anda inginkan "Memuatkan " teks untuk muncul:

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

Ini akan mencipta animasi tak terhingga yang memudarkan teks masuk dan keluar secara berterusan.

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