Cara menggunakan CSS untuk mencipta kesan paparan teks tatal yang lancar.

Cara menggunakan CSS untuk mencipta kesan paparan teks skrol lancar

Dalam reka bentuk web, kesan paparan teks skrol lancar Ia membawa orang ramai lebih lancar dan pengalaman pengguna yang lebih menarik. Kesan ini biasanya digunakan dalam adegan seperti karusel dan berita menatal. Artikel ini akan memperkenalkan langkah khusus untuk menggunakan CSS untuk mencapai kesan paparan teks tatal yang lancar dan memberikan contoh kod yang berkaitan.

Langkah 1: Cipta struktur HTML

Pertama, kita perlu mencipta elemen bekas yang mengandungi teks tatal. Boleh menjadi div, ul atau elemen HTML lain. Sebagai contoh, kami mencipta elemen div dan memberikannya ID unik:

<div id="scrolling-text">
  <ul>
    <li>文字1</li>
    <li>文字2</li>
    <li>文字3</li>
    <li>文字4</li>
    <li>文字5</li>
  </ul>
</div>

Langkah 2: Tetapkan gaya

Seterusnya, kita perlu menetapkan gaya elemen bekas , termasuk Lebar, ketinggian, pengendalian limpahan, dsb. Pada masa yang sama, anda juga perlu menetapkan gaya setiap item skrol, termasuk lebar, ketinggian, ketinggian baris, dsb. Berikut ialah tetapan gaya asas:

#scrolling-text {
  width: 300px;
  height: 200px;
  overflow: hidden;
  position: relative;
}

#scrolling-text ul {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  animation: scrolling 10s linear infinite;
}

#scrolling-text ul li {
  width: 300px;
  height: 40px;
  line-height: 40px;
}

Langkah 3: Mencapai kesan tatal lancar

Sekarang, kita perlu menggunakan animasi CSS untuk mencapai kesan tatal teks yang lancar. Kita boleh menggunakan peraturan @keyframes untuk mentakrifkan animasi yang dipanggil scrolling dan gunakannya pada elemen scrolling ul:

@keyframes scrolling {
  0% {
    top: 0;
  }
  100% {
    top: -200px;
  }
}

Dalam kod di atas, kami menggunakan keyframe 0% dan 100% masing-masing Mentakrifkan permulaan dan penamat keadaan animasi. Atribut atas mengawal kedudukan menegak item skrol.

Langkah 4: Optimumkan pengalaman

Untuk meningkatkan kebolehbacaan dan pengalaman pengguna kesan penatalan, kami boleh menambah acara tetikus pada elemen bekas untuk menjeda penatalan apabila tetikus melayang , dan mulakan semula menatal apabila tetikus pergi. Berikut ialah contoh kod yang dilaksanakan menggunakan JavaScript:

var scrollingText = document.getElementById('scrolling-text');

scrollingText.onmouseenter = function() {
  scrollingText.style.animationPlayState = 'paused';
}

scrollingText.onmouseleave = function() {
  scrollingText.style.animationPlayState = 'running';
}

Dengan menambahkan kod JavaScript di atas, apabila tetikus melayang di atas bekas skrol, animasi akan dijeda apabila tetikus keluar, animasi akan dimulakan semula .

Pada ketika ini, kami telah menyelesaikan semua langkah untuk menggunakan CSS untuk mencapai kesan paparan teks skrol yang lancar. Anda boleh melaraskan gaya dan sifat animasi mengikut keperluan anda sendiri untuk mendapatkan kesan tatal yang lebih sesuai dengan gaya reka bentuk web anda.

Ringkasnya, artikel ini memperkenalkan langkah pelaksanaan menggunakan CSS untuk mencipta kesan paparan teks tatal lancar, termasuk mencipta struktur HTML, menetapkan gaya, mencapai kesan tatal lancar dan mengoptimumkan pengalaman. Saya harap artikel ini dapat membantu anda mencapai kesan tatal teks dalam reka bentuk web.

Atas ialah kandungan terperinci Cara menggunakan CSS untuk mencipta kesan paparan teks tatal yang lancar.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!