Cara menggunakan CSS untuk mencipta kesan lajur berita menatal mendatar-tutorial css-php.cn

Cara menggunakan CSS untuk mencipta kesan lajur berita menatal mendatar

WBOY

Lepaskan： 2023-10-18 10:09:27

asal

1470 orang telah melayarinya

Cara menggunakan CSS untuk mencipta kesan lajur berita menatal mendatar

Cara menggunakan CSS untuk mencapai kesan lajur berita menatal mendatar

Dalam reka bentuk web, untuk meningkatkan kesan paparan dan pengalaman pengguna kandungan berita, kesan lajur berita menatal mendatar sering digunakan. Artikel ini akan memperkenalkan langkah khusus untuk melaksanakan lajur berita menatal mendatar menggunakan CSS dan menyediakan contoh kod untuk rujukan.

Buat struktur HTML

Mula-mula, buat bekas div dalam HTML untuk membungkus kandungan berita. Contohnya:

<div class="news-container">
  <ul class="news-list">
    <li>新闻1</li>
    <li>新闻2</li>
    <li>新闻3</li>
    <li>新闻4</li>
    <li>新闻5</li>
  </ul>
</div>

Salin selepas log masuk

Tetapkan gaya CSS

Seterusnya, tetapkan gaya bekas dan gaya senarai berita dalam CSS. Contohnya:

.news-container {
  width: 100%;
  overflow-x: scroll;  // 设置横向滚动
}

.news-list {
  display: flex;  // 设置新闻列表为弹性布局
  width: fit-content;  // 设置列表宽度为内容宽度
  white-space: nowrap;  // 防止新闻换行
}

.news-list li {
  padding: 10px;  // 设置新闻项的内边距
  margin-right: 10px;  // 设置新闻项之间的间距
}

Salin selepas log masuk

Tambah kesan animasi

Untuk membuat tatal bar berita, kita boleh menggunakan animasi CSS untuk mencapainya. Mula-mula tentukan animasi bingkai utama untuk mengawal anjakan senarai berita. Contohnya:

@keyframes move-news {
  0% {
    transform: translateX(0);  // 初始位置
  }
  100% {
    transform: translateX(-100%);  // 最终位置
  }
}

Salin selepas log masuk

Kemudian, gunakan animasi pada senarai berita. Contohnya:

.news-list {
  animation: move-news 10s linear infinite;  // 每10秒执行一次动画，使用线性缓动，并且无限循环
}

Salin selepas log masuk

Kesan sempurna

Untuk meningkatkan pengalaman pengguna, kami boleh menambah kesan menjeda animasi pada tuding tetikus. Tambahkan gaya berikut pada CSS:

.news-container:hover .news-list {
  animation-play-state: paused;  // 鼠标悬停时暂停动画
}

Salin selepas log masuk

Pada ketika ini, langkah utama untuk menggunakan CSS untuk mencapai kesan lajur berita menatal mendatar telah selesai.

Contoh kod lengkap adalah seperti berikut:

<!DOCTYPE html>
<html>
<head>
  <style>
    .news-container {
      width: 100%;
      overflow-x: scroll;
    }

    .news-list {
      display: flex;
      width: fit-content;
      white-space: nowrap;
      animation: move-news 10s linear infinite;
    }

    .news-list li {
      padding: 10px;
      margin-right: 10px;
    }

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

    .news-container:hover .news-list {
      animation-play-state: paused;
    }
  </style>
</head>
<body>
  <div class="news-container">
    <ul class="news-list">
      <li>新闻1</li>
      <li>新闻2</li>
      <li>新闻3</li>
      <li>新闻4</li>
      <li>新闻5</li>
    </ul>
  </div>
</body>
</html>

Salin selepas log masuk

Ringkasan

Melalui langkah di atas, kita boleh menggunakan CSS untuk mencapai kesan lajur berita menatal mendatar. Kesan ini boleh memaparkan berbilang kandungan berita dengan baik dan meningkatkan dinamik dan interaktiviti pengguna halaman. Parameter gaya dan animasi boleh dilaraskan mengikut keperluan sebenar untuk mencapai kesan tatal yang lebih fleksibel dan pelbagai.

Atas ialah kandungan terperinci Cara menggunakan CSS untuk mencipta kesan lajur berita menatal mendatar. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!