Rumah > Artikel > hujung hadapan web > Cara menggunakan CSS untuk mencipta kesan lajur berita menatal mendatar
Cara menggunakan CSS untuk mencipta kesan lajur berita menatal mendatar
- WBOYasal
- 2023-10-18 10:09:271454semak imbas
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>- 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; // 设置新闻项之间的间距
}- 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%); // 最终位置
}
}Kemudian, gunakan animasi pada senarai berita. Contohnya:
.news-list {
animation: move-news 10s linear infinite; // 每10秒执行一次动画，使用线性缓动，并且无限循环
}- 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; // 鼠标悬停时暂停动画
}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>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!