Bagaimana cara menggunakan CSS untuk mencapai kesan main balik yang lancar dari urutan imej?

Bagaimana untuk membuat kesan main balik urutan gambar yang lancar?

Banyak senario aplikasi memerlukan main balik video simulasi, tetapi bahan bukan video, tetapi banyak gambar. Penggantian langsung laluan imej dengan mudah boleh menyebabkan skrin hitam atau lag kerana perbezaan masa pemuatan imej. Artikel ini menyediakan penyelesaian yang cekap dan lancar.

Memuatkan gambar yang mudah satu demi satu terdedah kepada kelewatan, jadi kami mengamalkan penyelesaian yang lebih baik: sambungkan semua gambar ke dalam satu imej yang besar. Dengan mengandaikan imej adalah saiz yang sama, sambungnya secara mendatar ke dalam gambar yang panjang. Kemudian, gunakan atribut background-position CSS dan @keyframes animasi untuk mengawal mengimbangi imej latar belakang untuk mencapai penukaran imej.

Sebagai contoh, terdapat tiga gambar 500x300 piksel, dan selepas jahitan, kami mendapat gambar panjang 1500x300 piksel. Kod CSS berikut melaksanakan main balik gelung gambar:

 .container {
  lebar: 500px;
  Ketinggian: 300px;
  Latar Belakang: URL ("Split Image") Kiri / Auto 100% No-Repeat;
  Animasi: Main Langkah Main Balik (3, Mula) 0S Infinite; / * Langkah (bilangan gambar, mula) */
}

@KeyFrames Play {
  0% {latar belakang-kedudukan: 0 0; } /* Foto 1* /
  33.3% {latar belakang -kedudukan: -500px 0; } /* Foto 2* /
  66.7% {latar belakang -kedudukan: -1000px 0; } /* Foto 3* /
  100% {latar belakang-kedudukan: 0 0; } /* Kembali ke gambar pertama* /
}

Dalam kod itu, .container mentakrifkan saiz kontena, harta background menetapkan imej yang dijahit sebagai latar belakang, dan harta animation mentakrifkan animasi main balik. steps(3, start) memastikan bahawa imej dihidupkan langkah demi langkah, dan infinite bermaksud gelung tak terhingga. background-position mengawal kawasan paparan. Kuncinya adalah dengan tepat mengira offset setiap imej dan menulis ke dalam @keyframes . Tempoh main balik diselaraskan mengikut bilangan gambar dan kelajuan yang diperlukan. Kaedah ini mudah dan cekap, mengelakkan masalah kelewatan memuatkan satu demi satu, dan mencapai main balik urutan gambar yang lancar.

Atas ialah kandungan terperinci Bagaimana cara menggunakan CSS untuk mencapai kesan main balik yang lancar dari urutan imej?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!