Bagaimanakah Saya Boleh Mencipta Kesan Marquee CSS3 Responsif Tanpa Nilai Berkod Keras?

Kesan Marquee dalam CSS3: Mengelakkan Nilai Khusus untuk Penyesuaian Teks

Dalam animasi CSS3, selalunya wajar untuk mencipta kesan marquee, di mana teks tatal merentasi skrin. Walau bagaimanapun, menggunakan nilai khusus seperti "margin-left: -4200px;" kerana lekukan teks boleh menjadi terhad untuk panjang teks yang berbeza-beza.

Satu pendekatan untuk mengelakkan isu ini ialah dengan membalut teks dalam elemen span dan menggunakan sifat "padding-left" sebaliknya:

.marquee span {
  display: inline-block;
  width: max-content;
  padding-left: 100%; /* show the marquee just outside the paragraph */
  animation: marquee 15s linear infinite;
}

@keyframes marquee {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-100%, 0); }
}

Ini membolehkan animasi menyesuaikan diri dengan lebar teks, memastikan ia menatal sepenuhnya pada skrin. Selain itu, keadaan "legar" boleh digunakan untuk menjeda animasi apabila pengguna menuding pada teks:

.marquee span:hover {
  animation-play-state: paused;
}

Akhir sekali, untuk menghormati pilihan pengguna, kod ini melaksanakan media "gerakan dikurangkan" pertanyaan, yang mengurangkan kelajuan animasi atau melumpuhkannya sepenuhnya untuk pengguna yang mungkin lebih suka pergerakan yang kurang.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Kesan Marquee CSS3 Responsif Tanpa Nilai Berkod Keras?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!