Bagaimana untuk Membuat Berbilang Peralihan CSS pada Elemen Tunggal Berfungsi Serentak?

Berbilang Peralihan CSS pada Elemen

Dalam coretan HTML yang diberikan, peralihan CSS yang disediakan nampaknya saling menimpa satu sama lain, menyebabkan hanya kesan bayang teks untuk bernyawa apabila dituding. Untuk mendayakan animasi serentak warna dan bayang-bayang teks, pelarasan diperlukan.

Penyelesaian:

1. Gunakan Sifat Peralihan Dibatas Koma:

Sifat peralihan dalam CSS boleh dipisahkan koma. Dengan menggunakan teknik ini, anda boleh menentukan berbilang sifat yang akan beralih secara bebas. Begini cara anda boleh mengemas kini kod:

.nav a {
  transition: color .2s linear, text-shadow .2s linear;
}

2. Tentukan Fungsi Pemasa Linear Secara Eksplisit:

Walaupun fungsi pemasaan linear ialah lalai, adalah disyorkan untuk menentukannya secara eksplisit untuk kejelasan. Tambahkan baris berikut untuk memastikan kedua-dua peralihan mengikut janjang linear:

transition-timing-function: linear;

3. Gunakan Peralihan-* Sifat (Pilihan):

Untuk peralihan kompleks yang melibatkan berbilang sifat, selalunya lebih bersih untuk menggunakan sifat peralihan-* khusus dan bukannya sintaks trengkas. Berikut ialah contoh:

transition-property: color, text-shadow;
transition-duration: .2s;
transition-timing-function: linear;

Keputusan:

Dengan perubahan ini, kedua-dua sifat warna dan bayang-bayang teks akan beralih dengan lancar apabila melayang di atas elemen penambat dalam .nav senarai. Animasi akan dilaksanakan secara serentak dan bebas, membolehkan kesan yang lebih dinamik.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Berbilang Peralihan CSS pada Elemen Tunggal Berfungsi Serentak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!