css3列表自动滚动 |前台css

// HTML代码结构
<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; /*列表项高度*/
line-height: 50px; /*文字垂直居中*/
}
// 动画代码
@keyframes slide {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-250px); /*向上移动容器高度乘以列表项数量*/
}
}

首先，大家需要一个包含列表的容器，并且给容器定义宽度以便于自动滚动。然后设置容器的overflow属性为hidden，这样超出容器范围的列表项就会被隐藏。

接下来，大家定义一个列表样式，并给每个列表项设置高度和垂直居中属性。然后为列表添加一段动画代码，使用CSS3的动画属性实现列表向上滚动的效果。

动画属性中的重点是使用translateY函数，它用来沿着Y轴方向移动元素。大家设定从0%到100%的过渡效果，在过渡过程中每次向上移动容器高度乘以列表项数量的距离，这样就可以将整个列表向上滚动。

最后，在容器的样式中加入动画属性，使用linear线性过渡效果，且将动画次数设置为无限循环，这样就完成了列表自动滚动的实现。