js也可以实现，但css3更加的平滑和资源占用更少。下面是具体代码，动画要单独用一个类名，否则暂停估计不会生效：文章来源：https://www.toymoban.com/news/detail-835367.html
原理：动画向上移动，目标完全消失后，从头开始，注意 动画移动高度是文本高度，这个不好控制要微调，如果文本是动态的则要把动画通过js生成动态设置移动高度。js实现是获取消失的部分，添加到尾部，周而复始，平滑度很难控制文章来源地址https://www.toymoban.com/news/detail-835367.html
<div class="list">
<div class="rowup anim">
<div class="text">
<div>1111111111111111111111111111111111111111111111：</div>
<div>11111111111111111111111111111111111</div>
<div>222222222222222222222222222222222。</div>
</div>
<div class="text">
<div>1111111111111111111111111111111111111111111111：</div>
<div>11111111111111111111111111111111111</div>
<div>222222222222222222222222222222222。</div>
</div>
</div>
</div> .list {
position: relative;
width: 200px;
height: 127px;
overflow: hidden;
color: #FFFFFF;
border: 1px solid white;
text-align: left;
}
.list .rowup {
height: 127px;
position: relative;
}
.anim {
animation: 5s rowup linear infinite normal;
}
/*暂停*/
.pause {
animation-play-state: paused;
}
@keyframes rowup {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(0, -167px, 0);/*文本高度*/
}
} $(".rowup").hover(function(){
$(this).addClass('pause')
},function(){
$(this).removeClass('pause')
})
到了这里，关于css3实现无缝滚动，鼠标经过暂停的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
