Bagaimanakah Saya Boleh Mencipta Kesan Marquee Responsif Yang Mengendalikan Panjang Teks Berubah?

<p>

Kesan Marquee: Menyelesaikan Teka-teki Kebolehubahan Panjang

<p>Dalam senario ini, kami berusaha untuk mencipta kesan marquee dengan panjang teks dinamik. Secara tradisinya, ini telah dicapai menggunakan nilai khusus untuk sifat CSS seperti "margin-left." Walau bagaimanapun, pendekatan ini gagal apabila menggunakan teks dengan panjang yang berbeza-beza.

<p>Nasib baik, terdapat penyelesaian yang membebaskan marquee kami daripada pengehadan ini. Dengan membuat sedikit pelarasan pada HTML kami dan menambahkan elemen span dalam perenggan kami, kami membuka kunci penyelesaian yang lebih mudah disesuaikan:

<p>

<p>Seterusnya, kami mentakrifkan peraturan CSS untuk kedua-dua kelas "marquee" dan "span" . Kelas "marquee" mentakrifkan lebar dan penggayaan perenggan, manakala kelas "span" mengendalikan animasi teks:

.marquee {
  width: 450px;
  margin: 0 auto;
  overflow: hidden;
  box-sizing: border-box;
}

.marquee span {
  display: inline-block;
  width: max-content;
  padding-left: 100%;
  will-change: transform;
  animation: marquee 15s linear infinite;
}

<p>Pelarasan untuk "lebar" dan "padding-left" membenarkan marquee untuk memuatkan teks dengan panjang yang berbeza-beza, memastikan ia menatal dengan lancar tanpa memotong sebarang kandungan.

<p>Walau bagaimanapun, terdapat satu nuansa terakhir yang perlu kami tangani: kebolehaksesan dan pilihan pengguna. Bagi pengguna yang lebih suka gerakan yang dikurangkan, kami menggunakan peraturan pertanyaan media untuk melaraskan gelagat animasi. Ini memastikan bahawa marquee menghormati pilihan pengguna:

@media (prefers-reduced-motion: reduce) {
  .marquee span {
    animation-iteration-count: 1;
    animation-duration: 0.01;
    width: auto;
    padding-left: 0;
  }
}

<p>Dengan melaksanakan perubahan ini, kami mencapai kesan marquee yang menyesuaikan dengan panjang teks dengan anggun di samping menghormati pilihan pengguna.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Kesan Marquee Responsif Yang Mengendalikan Panjang Teks Berubah?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!