Bagaimanakah Saya Boleh Mencipta Kesan Berkelip dengan CSS3 Tanpa JavaScript atau Peralihan?

Animasi Berkelip tanpa Peralihan menggunakan CSS3

Soalan:

Bolehkah teks berkelip tanpa menggunakan JavaScript atau hiasan teks, meniru tag tanpa peralihan berterusan?

Jawapan:

teg dalam penyemak imbas lama mempunyai kitaran tugas 80%, bermakna ia kelihatan untuk 80% masa dan tersembunyi selama 20%. Berikut ialah penyelesaian CSS yang mereplikasi secara rapat tingkah laku ini, hanya mempengaruhi teks:

.blink {
  animation: blink-animation 1s steps(5, start) infinite;
  -webkit-animation: blink-animation 1s steps(5, start) infinite;
}
@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}

Penggunaan:

This is <span class="blink">blinking</span> text.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Kesan Berkelip dengan CSS3 Tanpa JavaScript atau Peralihan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!