Bagaimana untuk melaksanakan tatal atas dan bawah dalam css

CSS untuk merealisasikan tatal atas dan bawah

Dalam reka bentuk dan pembangunan web, adalah keperluan biasa untuk merealisasikan kesan tatal atas dan bawah teks. Di bawah ini kami memperkenalkan kaedah berasaskan CSS untuk mencapai tatal ke atas dan ke bawah.

Langkah 1: Tentukan bekas

Dalam HTML, kita perlu menentukan bekas terlebih dahulu untuk mengandungi kandungan yang perlu ditatal. Anda boleh menggunakan div sebagai bekas atau elemen HTML lain.

Contoh kod:

<div class="scroll-container">
  <p>这是需要滚动的内容……</p>
  <p>这也是需要滚动的内容……</p>
  <p>这还是需要滚动的内容……</p>
</div>

Langkah 2: Tetapkan gaya

Kami menggunakan CSS untuk menetapkan gaya asas bekas, termasuk lebar, tinggi, jidar, dsb. Pada masa yang sama, kita perlu menggunakan atribut overflow: hidden untuk menyembunyikan kandungan di luar skop bekas supaya kandungan boleh menatal dengan bebas di dalam bekas.

Contoh kod:

.scroll-container {
  width: 400px;
  height: 200px;
  border: 1px solid #ccc;
  overflow: hidden;
}

Langkah 3: Laksanakan kesan menatal

Dalam bekas, kita perlu mentakrifkan elemen sebagai "tetingkap" bergolek untuk memaparkan yang diperlukan kandungan menatal. Kita boleh menggunakan kedudukan untuk meletakkan tetingkap tatal ini di dalam bekas dan menetapkan kedudukan asalnya.

Untuk mencapai kesan penatalan, kita perlu menggunakan atribut animation CSS untuk mentakrifkan animasi. Dalam animasi, kita boleh mengawal kedudukan tetingkap tatal, menggerakkannya ke atas atau ke bawah, dan menetapkan kelajuan tatal.

Contoh Kod:

.scroll-container {
  position: relative;
}

.scroll-container p {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  animation: scroll 10s linear infinite;
}

@keyframes scroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}

Dalam contoh di atas, kami mentakrifkan tetingkap tatal sebagai elemen kanak-kanak scroll-container di dalam elemen p dan letakkannya di dalam scroll-container sudut kiri atas bekas. Seterusnya, kami menggunakan position: absolute untuk menanggalkannya daripada aliran dokumen daripada bekas, dan menggunakan top: 0 dan left: 0 untuk meletakkannya di atas bekas.

Dalam atribut animation, kami menggunakan scroll sebagai nama animasi, dan menetapkan tempohnya kepada 10 saat, dan fungsi masa kepada linear, menunjukkan gerakan seragam. infinite bermaksud animasi berterusan selama-lamanya. Seterusnya, kami mentakrifkan proses animasi khusus dalam @keyframes scroll, dengan transform: translateY(-100%) bermaksud menaikkan ketinggian tetingkap tatal untuk mencapai kesan tatal.

Langkah 4: Lengkapkan kod

Langkah di atas disepadukan bersama dan kod lengkap akhir adalah seperti berikut:

<div class="scroll-container">
  <p>这是需要滚动的内容……</p>
  <p>这也是需要滚动的内容……</p>
  <p>这还是需要滚动的内容……</p>
</div>

Di atas adalah langkah dan kod lengkap untuk menatal ke atas dan ke bawah menggunakan CSS , keperluan yang berbeza boleh dicapai dengan mengubah suai gaya bekas dan tetingkap bergolek.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan tatal atas dan bawah dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!