Bagaimana untuk melaksanakan berbilang kesan peralihan CSS
P粉258788831
P粉258788831 2023-08-22 11:00:36
0
2
389

Ini adalah soalan yang agak mudah, tetapi saya tidak menemui dokumentasi yang baik tentang sifat peralihan CSS. Berikut ialah coretan CSS:

.nav a { text-transform:huruf besar; text-decoration:none; warna:#d3d3d3; garis-ketinggian: 1.5em; saiz fon:.8em; paparan:blok; text-align:center; bayang teks: 0 -1.5em 0 rgba(255, 255, 255, 0.15); -webkit-transition: color .2s linear; -moz-transition: color .2s linear; -o-peralihan: warna .2s linear; peralihan: warna .2s linear; -webkit-transition: text-shadow .2s linear; -moz-transition: text-shadow .2s linear; -o-transition: text-shadow .2s linear; peralihan: teks-bayang .2s linear; } .nav a:hover { warna:#F7931E; bayang teks: 0 1.5em 0 rgba(247, 147, 30, 0.15); }

Seperti yang anda lihat, sifat peralihan saling menimpa satu sama lain. Pada masa ini, bayangan teks bernyawa, tetapi warnanya tidak. Bagaimanakah saya boleh menjadikannya bernyawa pada masa yang sama? Terima kasih atas sebarang jawapan.

P粉258788831
P粉258788831

membalas semua (2)
P粉930448030

Sunting: Saya teragak-agak untuk memadamkan siaran ini. Dari segi memahami sintaks CSS, adalah baik untuk memberitahu orang ramai bahawaallwujud, dan bergantung pada struktur CSS, mungkin lebih baik daripada sejuta pengisytiharan berasingan. Sebaliknya, iabolehmempunyai penalti prestasi, walaupun saya tidak melihat sebarang data untuk menyokong hipotesis ini. Saya akan meninggalkannya buat masa ini, tetapi saya harap orang ramai menyedari ia adalah jalan dua hala.

Catatan asal:

Anda juga boleh menggunakan kod berikut:

.nav a { transition: all .2s; }

FWIW: Jika tidak dinyatakan,all是默认的,所以transition: .2s;ialah lalai, jaditransition: .2s;juga boleh mencapai kesan yang sama.

    P粉055726146

    Dalam semua pelayar yang menyokong kesan peralihan, atribut peralihan dipisahkan dengan koma:

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

    ease是默认的时间函数,所以你不需要指定它。如果你真的想要linear, anda perlu menyatakan dengan jelas:

    transition: color .2s linear, text-shadow .2s linear;

    Ini mula berulang, jadi jika anda akan menggunakan fungsi masa dan masa yang sama pada berbilang sifat, lebih baik menggunakan pelbagai sifattransition-*dan bukannya trengkas:

    transition-property: color, text-shadow; transition-duration: .2s; transition-timing-function: linear;
      Muat turun terkini
      Lagi>
      kesan web
      Kod sumber laman web
      Bahan laman web
      Templat hujung hadapan
      Tentang kita Penafian Sitemap
      Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!