css无缝滚动怎么做 |html css mobile

　　HTML代码如下：
<div class="wrapper">
<ul class="list">
<li>第一条信息</li>
<li>第二条信息</li>
<li>第三条信息</li>
<li>第四条信息</li>
<li>第五条信息</li>
</ul>
</div>

　　首先，大家需要给外层容器定义固定的高度（height），如下所示：

　　CSS代码如下：
.wrapper{
height: 100px;
overflow: hidden;
}

　　接着，大家给滚动列表定义无限迭代的动画效果（animation），如下所示：

　　CSS代码如下：
.list{
animation: scroll 10s linear infinite;
}
@keyframes scroll{
0%{
transform: translateY(0px);
}
100%{
transform: translateY(-100%);
}
}

　　这里，大家定义了一个名为scroll的动画，将其应用到列表中。动画效果是让列表按照Y轴平移动画，从0px的位置开始到-100%的位置结束，运动时间是10秒，并且在无限次循环中生效。

　　最后，大家需要一些简单的样式修饰，使得页面呈现更美观、优雅的效果，如下所示：

　　CSS代码如下：
.list{
margin: 0;
padding: 0;
}
li{
list-style: none;
height: 100px;
line-height: 100px;
font-size: 20px;
text-align: center;
color: #fff;
}

　　完整的CSS无缝滚动代码实例如下：

　　CSS代码如下：
.wrapper{
height: 100px;
overflow: hidden;
}
.list{
margin: 0;
padding: 0;
animation: scroll 10s linear infinite;
}
@keyframes scroll{
0%{
transform: translateY(0px);
}
100%{
transform: translateY(-100%);
}
}
li{
list-style: none;
height: 100px;
line-height: 100px;
font-size: 20px;
text-align: center;
color: #fff;
}

　　通过上述实现步骤，大家就可以轻松地实现一个简单、美观的CSS无缝滚动效果了。希望大家能够在实际制作中灵活运用，为自己的网页制作增添新的元素！