Rumah > hujung hadapan web > tutorial css > Bagaimana untuk Mencipta Animasi Gelung Pudar Infinite untuk Teks \'Memuatkan\' dengan CSS?

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

Susan Sarandon
Lepaskan: 2024-10-26 09:21:30
asal
324 orang telah melayarinya

How to Create an Infinite Fading Loop Animation for

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>
Salin selepas log masuk

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>
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan