Bagaimana untuk Mencipta Animasi Pudar Teks Gelung \"Memuatkan\" dengan CSS Tulen?

Mencipta Animasi CSS Bergelung untuk Memudar Masuk & Keluar Teks "Memuatkan"

Untuk mencapai kesan animasi pudar berterusan untuk "Memuatkan" teks tanpa menggunakan JavaScript, mari kita mendalami dunia animasi CSS. Begini cara untuk melakukannya:

Menyediakan Kerangka Kunci Animasi

Peraturan @keyframes mentakrifkan bingkai utama animasi, menyatakan nilai kelegapan pada cap waktu tertentu. Dalam kes kami, kami mahu teks menjadi pudar masuk dan keluar.

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

Menggunakan Animasi

Kami menggunakan animasi pada elemen HTML yang dikehendaki menggunakan CSS nama kelas. Sifat animasi mengambil nama animasi bingkai utama dan tempohnya.

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

Keserasian Merentas Penyemak Imbas

Untuk memastikan keserasian merentas penyemak imbas, adalah penting untuk memasukkan awalan khusus penyemak imbas untuk sifat animasi.

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

Pengintegrasian HTML

Akhir sekali, tambahkan elemen HTML dengan nama kelas untuk memaparkan teks animasi.

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

Hasil

Animasi kini akan terus memudarkan teks "Memuatkan" masuk dan keluar, mewujudkan kesan gelung.

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