Mengapa imej dan animasi hilang apabila menambah kelas pada lajur terakhir?-Soal Jawab Rangkaian PHP Cina

Saya cuba menghidupkan 6 imej dalam gelung tak terhingga.

Apabila saya menambah imej ke-6 dan menambah kelas "poster", tiada imej dipaparkan, tetapi jika saya meninggalkan menambah kelas "poster" pada lajur ke-6 (atau imej), 5 imej pertama muncul dengan betul dan animasi.

Saya tidak faham mengapa ini berlaku.

Seperti yang anda lihat, kelas "poster" tiada dalam lajur keenam, jadi kod saya berfungsi, tetapi sebaik sahaja saya menambah kelas itu, ia berhenti berfungsi.

(Saya menggunakan bootstrap 5 tetapi saya pasti ini tiada kaitan dengan isu ini kerana kod yang saya tunjukkan ia mereplikasi isu dengan sempurna)

@keyframes bergerak { kepada { kedudukan latar belakang: -100vw 80%; } } .galeria { kedudukan: relatif; limpahan: tersembunyi; } .poster { jawatan: mutlak; animasi: moveAcross 6s linear tak terhingga; } .poster-1 { kelewatan animasi: -0s; tempoh animasi: 6s; } .poster-2 { kelewatan animasi: -1s; tempoh animasi: 6s; } .poster-3 { kelewatan animasi: -2s; tempoh animasi: 6s; } .poster-4 { kelewatan animasi: -3s; tempoh animasi: 6s; } .poster-5 { kelewatan animasi: -4s; tempoh animasi: 6s; } .poster-6 { kelewatan animasi: -5s; tempoh animasi: 6s; } @keyframes moveAcross { 0% { kiri: -300px; } 100% { kiri: 110%; } }

@keyframes moves { to { background-position: -100vw 80%; } } .galería { position: relative; overflow: hidden; } .poster { position: absolute; animation: moveAcross 6s linear infinite; } .poster-1 { animation-delay: -0s; animation-duration: 6s; } .poster-2 { animation-delay: -1s; animation-duration: 6s; } .poster-3 { animation-delay: -2s; animation-duration: 6s; } .poster-4 { animation-delay: -3s; animation-duration: 6s; } .poster-5 { animation-delay: -4s; animation-duration: 6s; } .poster-6 { animation-delay: -5s; animation-duration: 6s; } @keyframes moveAcross { 0% { left: -300px; } 100% { left: 110%; } }

membalas semua (1)

P粉6048485882023-08-16 10:44:33 Tingkat 1

Dalam lajur keenam, ia berfungsi dengan sempurna dengan kelas.poster, sama ada menggunakan Bootstrap 5 atau tidak.

Sunting: Anda boleh menambah poster dengan sifat tersembunyi pada penghujungnya dan ia akan berfungsi selagi poster terakhir tidak mengandungi kelas.poster:)