CSS3有一項(xiàng)很實(shí)用的功能，可以讓列表自動滾動。在某些情況下，無法顯示完整的列表項(xiàng)時，自動滾動可以極大地提升用戶體驗(yàn)。下面我們來詳細(xì)了解如何實(shí)現(xiàn)列表自動滾動。

// HTML代碼結(jié)構(gòu)
<div class="slider-container">
<ul class="slider-list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
// CSS代碼
.slider-container {
width: 200px; /*容器寬度*/
overflow: hidden; /*隱藏超出部分*/
}
.slider-list {
margin: 0;
padding: 0;
list-style: none;
animation: slide 10s linear infinite; /*動畫屬性*/
}
.slider-list li {
height: 50px; /*列表項(xiàng)高度*/
line-height: 50px; /*文字垂直居中*/
}
// 動畫代碼
@keyframes slide {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-250px); /*向上移動容器高度乘以列表項(xiàng)數(shù)量*/
}
}

首先，我們需要一個包含列表的容器，并且給容器定義寬度以便于自動滾動。然后設(shè)置容器的overflow屬性為hidden，這樣超出容器范圍的列表項(xiàng)就會被隱藏。

接下來，我們定義一個列表樣式，并給每個列表項(xiàng)設(shè)置高度和垂直居中屬性。然后為列表添加一段動畫代碼，使用CSS3的動畫屬性實(shí)現(xiàn)列表向上滾動的效果。

動畫屬性中的重點(diǎn)是使用translateY函數(shù)，它用來沿著Y軸方向移動元素。我們設(shè)定從0%到100%的過渡效果，在過渡過程中每次向上移動容器高度乘以列表項(xiàng)數(shù)量的距離，這樣就可以將整個列表向上滾動。

最后，在容器的樣式中加入動畫屬性，使用linear線性過渡效果，且將動畫次數(shù)設(shè)置為無限循環(huán)，這樣就完成了列表自動滾動的實(shí)現(xiàn)。