Bagaimana untuk Mencipta Kesan Marquee Responsif dengan Animasi CSS3?

Bagaimanakah saya boleh mencipta kesan marquee responsif dengan animasi CSS3?

Animasi CSS3 menyediakan cara yang berkesan untuk menambah gerakan pada elemen tapak web anda. Salah satu aplikasi yang paling biasa ialah kesan marquee, di mana teks menatal merentasi skrin. Walau bagaimanapun, mencipta kesan marquee yang menyesuaikan diri dengan teks pada sebarang panjang boleh mencabar.

Percubaan Sebelumnya

Pendekatan tradisional untuk mencipta kesan marquee selalunya bergantung pada nilai tetap seperti margin-left:-4200px; . Walaupun ini berfungsi untuk saiz teks tertentu, ia menjadi bermasalah apabila panjang teks berbeza-beza.

Menyesuaikan Pendekatan

Menggunakan penanda yang diubah suai sedikit, dengan rentang bersarang dalam perenggan, membolehkan lebih banyak penyelesaian responsif. Berikut ialah pendekatan yang dikemas kini:

.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;
}
@keyframes marquee {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-100%, 0); }
}

Dalam pendekatan ini, lebar rentang ditetapkan kepada "kandungan maksimum", memastikan ia melaraskan kepada panjang teks. Padding-left digunakan untuk mengalihkan teks di luar kawasan yang boleh dilihat dan animasi menterjemahkan kembali teks ke dalam paparan, mewujudkan kesan marquee.

Menghormati Keutamaan Pengguna

Untuk kebimbangan kebolehaksesan, kod menghormati pilihan pengguna mengenai gerakan. jika pengguna lebih suka gerakan yang dikurangkan, animasi akan dilumpuhkan.

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

Dengan menggabungkan teknik ini, anda boleh mencipta kesan marquee responsif yang menyesuaikan diri dengan sebarang jumlah teks, meningkatkan fleksibiliti dan kebolehcapaian reka bentuk anda.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Kesan Marquee Responsif dengan Animasi CSS3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!