Bagaimana untuk Mencipta Teks Berkelip Pudar Lancar dengan CSS3?

Teks Berkelip Diperbuat Mudah dengan CSS 3

Soalan:

Bagaimana saya boleh membuat kelipan teks yang pudar secara beransur-ansur dan kemudiannya pudar masuk semula, bukannya pudar semata-mata dan muncul semula serta-merta?

Jawapan:

Untuk mencapai kesan ini, anda perlu menetapkan kelegapan kepada 0 pada 50% dalam definisi bingkai utama animasi. Ini akan memastikan bahawa teks secara beransur-ansur pudar dan kemudian pudar masuk semula semasa kitaran animasi.

Pengubahsuaian Kod:

Sebelum ini, kod itu ialah:

@-webkit-keyframes blinker {
  from { opacity: 1.0; }
  to { opacity: 0.0; }
}

Untuk menyelesaikan isu, gantikan dengan:

@-webkit-keyframes blinker {
  50% {
    opacity: 0;
  }
}

Pengubahsuaian ini akan menyebabkan teks akan pudar pada 50% daripada tempoh animasi dan kemudian beransur-ansur pudar masuk semula semasa baki 50%.

Demo:

<div>

.blink_me {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

Dan di sana anda mempunyainya! Teks berkelip dengan kesan pudar masuk dan keluar yang lancar, semuanya berkat keupayaan animasi CSS 3.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Teks Berkelip Pudar Lancar dengan CSS3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!