Bagaimana untuk mencapai berita tatal lancar melalui kaedah dan teknik CSS tulen

Kaedah dan teknik tentang cara mencapai berita tatal lancar melalui CSS tulen

Dengan pembangunan berterusan teknologi Web, cara untuk mencapai beberapa kesan hebat melalui CSS telah menjadi usaha pembangun bahagian hadapan. Artikel ini akan memperkenalkan kaedah dan teknik tentang cara untuk mencapai berita tatal lancar melalui CSS tulen, dan memberikan contoh kod khusus.

1. Idea pelaksanaan
Secara amnya terdapat dua cara untuk melaksanakan kesan berita tatal lancar: menggunakan animasi CSS dan menggunakan atribut transformasi CSS3. Di bawah ini kami akan memperkenalkan dua kaedah ini satu persatu.

1. Gunakan animasi CSS
Animasi CSS mentakrifkan kesan animasi melalui bingkai utama (@bingkai kunci), dan menggunakan animasi pada elemen melalui atribut animasi. Kunci untuk mencapai berita tatal lancar adalah untuk mencapai kesan tatal lancar melalui gelung animasi yang tidak terhingga.

Langkah pelaksanaan khusus adalah seperti berikut:
(1) Cipta bekas div dan tetapkan lebarnya kepada lebar kandungan skrol.
(2) Masukkan kandungan tatal dalam bekas dan tetapkannya sebagai elemen sebaris.
(3) Gunakan animasi CSS untuk mencapai kesan penatalan, dan kawal kelajuan dan kesan penatalan dengan menetapkan tempoh dan sifat fungsi pemasaan animasi.
(4) Buat gelung animasi secara tak terhingga dengan menetapkan atribut animasi tak terhingga.

Kod contoh adalah seperti berikut:

<div class="news-container">
  <ul class="news">
    <li>新闻1</li>
    <li>新闻2</li>
    <li>新闻3</li>
    <li>新闻4</li>
    <li>新闻5</li>
    <!-- 添加更多新闻 -->
  </ul>
</div>

.news-container {
  width: 400px;
  overflow: hidden;
}

.news {
  list-style: none;
  padding: 0;
  margin: 0;
  white-space: nowrap;
  animation: scroll-news 10s linear infinite;
}

.news li {
  display: inline;
  margin-right: 20px;
}

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

Dalam kod di atas, kandungan berita diterjemahkan ke kiri melalui kerangka utama animasi skrol-berita translateX(-100%) bermaksud untuk menterjemahkan elemen ke kiri sebanyak seratus peratus daripada lebarnya sendiri, mencapai kesan tatal.

2. Gunakan sifat Transform CSS3
Sifat Transform CSS3 ialah kaedah yang boleh memutar, menskala, menterjemah dan elemen serong. Apabila melaksanakan tatal lancar berita, kami boleh menggunakan TranslateX dalam atribut Transform untuk menterjemah elemen.

Langkah pelaksanaan khusus adalah seperti berikut:
(1) Cipta bekas div dan tetapkan lebarnya kepada lebar kandungan skrol.
(2) Masukkan kandungan tatal dalam bekas dan tetapkannya sebagai elemen blok sebaris.
(3) Laksanakan kesan tatal dengan menetapkan atribut Transform, dan kawal kelajuan dan kesan tatal dengan menetapkan atribut kemudahan masuk-keluar peralihan.

Kod sampel adalah seperti berikut:

<div class="news-container">
  <ul class="news">
    <li>新闻1</li>
    <li>新闻2</li>
    <li>新闻3</li>
    <li>新闻4</li>
    <li>新闻5</li>
    <!-- 添加更多新闻 -->
  </ul>
</div>

.news-container {
  width: 400px;
  overflow: hidden;
}

.news {
  list-style: none;
  padding: 0;
  margin: 0;
  white-space: nowrap;
  animation: scroll-news 10s linear infinite;
}

.news li {
  display: inline-block;
  margin-right: 20px;
  transition: transform 1s ease-in-out;
}

.news li:hover {
  transform: translateX(-100%);
}

Dalam kod di atas, dengan menetapkan pemilih kelas pseudo :hover dan atribut Transform, apabila tetikus melayang di atas senarai berita, elemen akan diterjemahkan ke kiri oleh satu ratus peratus daripada lebarnya sendiri. .

Tetapkan atribut limpahan bekas kepada tersembunyi untuk menyembunyikan kandungan di luar skop bekas.

Tetapkan kandungan tatal menjadi elemen blok sebaris atau sebaris untuk mencapai kesan susunan mendatar.

1. Tetapkan margin antara item berita untuk mengekalkan jarak antara kandungan menatal.
2. Mencapai kesan menatal dengan menggunakan animasi atau sifat Transform dan sediakan gelung tak terhingga.
3. Dengan kaedah dan teknik di atas, kita boleh dengan mudah mencapai kesan berita tatal lancar melalui CSS tulen. Saya harap artikel ini boleh membantu anda Jika anda berminat untuk mengetahui lebih lanjut tentang CSS, anda boleh terus meneroka kesan hebat CSS yang lain.

Atas ialah kandungan terperinci Bagaimana untuk mencapai berita tatal lancar melalui kaedah dan teknik CSS tulen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!