Rumah >hujung hadapan web >tutorial css >CSS Scroll-Timeline dengan Keutamaan Gerakan
Cepat melayari perkara utama:
@scroll-timeline
telah ditandakan dalam krom. Bramus juga menunjukkan kepada kami penggunaan ciri-ciri ini pada trik CSS, terutamanya apabila digunakan bersama dengan Waapi.prefers-reduced-motion
Satu-satunya perkara yang saya ingin tambah ialah harta prefers-reduced-motion
perlu dipertimbangkan, kerana animasi menatal ini boleh menjejaskan orang yang terdedah kepada penyakit bergerak. Untuk melakukan ini, anda boleh menggabungkan ujian dengan ujian yang disokong dalam JavaScript pada baris yang sama:
jika ( ! Css.supports ("animasi-masa: foo") && ! window.matchmedia ('(lebih suka-dikurangkan-gerakan: mengurangkan)'). Perlawanan ) { // Jalankan kesan sejuk}
Saya tidak pasti lebih baik untuk menguji ketidakpuasan atau sebaliknya reduce
. Sama ada cara, silap mata dalam CSS adalah untuk membungkus apa sahaja yang anda mahu lakukan dengan @scroll-timeline
dan animation-timeline
dalam ujian @supports
(jika anda ingin melakukan sesuatu yang lain), dan kemudian bungkus ujian itu dalam ujian keutamaan:
@media (lebih suka-dikurangkan-gerakan: tidak ada pilihan) { @Supports (Animation-Timeline: Works) { /* Melaksanakan kesan sejuk*/ } }
Ini demonstrasi, dan semua kredit adalah kepada Bramus, yang membuatnya berlaku.
Oh, awak tahu? Jika @when
menjadi ciri, CSS akan lebih ringkas:
@When Supports (Animation-Timeline: Works) dan Media (lebih suka-dikurangkan-Motion: No-Preference) { } @else { }
Atas ialah kandungan terperinci CSS Scroll-Timeline dengan Keutamaan Gerakan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!