Bagaimana untuk Mencipta Gelung Animasi Teks Pudar Masuk & Keluar CSS \'Memuatkan\' tanpa JavaScript?

Gelung Animasi CSS Mudah: Pudar Masuk & Keluar Teks "Memuatkan"

Untuk mencipta animasi gelung dalam CSS yang memudar masuk dan keluar teks tanpa menggunakan JavaScript, pertimbangkan perkara berikut:

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

Peraturan @keyframes mentakrifkan animasi itu sendiri. Dalam kes ini, animasi hanya menukar kelegapan elemen daripada legap sepenuhnya kepada telus sepenuhnya dan kembali semula.

<code class="css">.animate-flicker {
    opacity:1;  
    animation: flickerAnimation 1s infinite;
}</code>

Kelas .animate-flicker menggunakan animasi pada mana-mana elemen dengan kelas itu. Sifat animasi menentukan nama animasi, tempoh setiap lelaran (dalam kes ini, 1 saat) dan sama ada animasi harus berulang tanpa had.

Satu perkara yang perlu diambil perhatian ialah kod di atas mungkin tidak berfungsi dalam semua pelayar. Untuk memastikan keserasian dengan julat penyemak imbas yang lebih luas, anda perlu menambah awalan vendor yang sesuai pada sifat animasi. Contohnya:

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

Dengan tambahan awalan vendor ini, animasi harus berfungsi dalam kebanyakan penyemak imbas moden.

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