js也可以實(shí)現(xiàn)，但css3更加的平滑和資源占用更少。下面是具體代碼，動(dòng)畫要單獨(dú)用一個(gè)類名，否則暫停估計(jì)不會(huì)生效：文章來源：http://www.zghlxwxcb.cn/news/detail-835367.html
原理：動(dòng)畫向上移動(dòng)，目標(biāo)完全消失后，從頭開始，注意 動(dòng)畫移動(dòng)高度是文本高度，這個(gè)不好控制要微調(diào)，如果文本是動(dòng)態(tài)的則要把動(dòng)畫通過js生成動(dòng)態(tài)設(shè)置移動(dòng)高度。js實(shí)現(xiàn)是獲取消失的部分，添加到尾部，周而復(fù)始，平滑度很難控制文章來源地址http://www.zghlxwxcb.cn/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')
})
到了這里，關(guān)于css3實(shí)現(xiàn)無縫滾動(dòng)，鼠標(biāo)經(jīng)過暫停的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
