Bagaimanakah Saya Boleh Mencipta Teks Berkelip Dwi Arah dengan CSS3?

Mencapai Teks Berkelip Dwi Arah dengan CSS 3

Kod semasa anda, @-webkit-keyframes blinker {...}, menghasilkan satu arah kelipan elemen teks. Untuk mencapai kesan dua arah, apabila teks memudar dan masuk kembali, laraskan bingkai utama animasi seperti berikut:

.waitingForConnection {
-webkit-animation-name: blinker;
-webkit-animation -kiraan-lelaran: tak terhingga;
-fungsi-masa-animasi-webkit: cubic-bezier(.5, 0, 1, 1);
-webkit-animation-duration: 1.7s;
}

@-webkit-keyframes blinker {
dari { kelegapan : 1.0; }
50% { kelegapan: 0; }
kepada { kelegapan: 1.0; }
}

Pelarasan ini menetapkan kelegapan daripada 1.0 kepada 0 pada tanda 50%, dengan berkesan memudarkan teks. Animasi kemudian mengembalikan kelegapan kembali kepada 1.0, menghasilkan kesan berkelip dua arah yang diingini. Selang dan tempoh berkelip boleh disesuaikan dengan melaraskan nilai dalam peraturan @-webkit-keyframes.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Teks Berkelip Dwi Arah dengan CSS3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!