這篇文章主要介紹了Css3實(shí)現(xiàn)無縫滾動(dòng)防抖的方法，幫助大家解決圖片抖動(dòng)，感興趣的朋友可以了解下

問題

圖片加文字的無縫滾動(dòng)，在手機(jī)端的效果總體還行，但是圖片在手機(jī)某些瀏覽器會(huì)抖得膩害！

錯(cuò)誤寫法

不能用left，margin-left,像這種寫法:

.donghua.active{
animation: scoll ease-in-out 1s infinite alternate;
-webkit-animation: scoll ease-in-out 1s infinite alternate;
}
@keyframes scoll {
from {
left: 0;
}
to {
left: -353px;
}
}
-webkit-@keyframes scoll {
from {
left: 0;
}
to {
left: -353px;
}
}

解決方法

里面的某個(gè)元素在手機(jī)端會(huì)抖動(dòng)的膩害,改用二維的translate像這樣:

.donghua.active{
animation: scoll ease-in-out 1s infinite alternate;
-webkit-animation: scoll ease-in-out 1s infinite alternate;
}
@keyframes scoll {
0% {
transform: translate(0px, 0px);
}

100% {
transform: translate(0px, -353px);
}
}
@-webkit-keyframes scoll {
0% {
transform: translate(0px, 0px);
}

100% {
transform: translate(0px, -353px);
}
}

以上就是Css3實(shí)現(xiàn)無縫滾動(dòng)防抖的詳細(xì)內(nèi)容，更多關(guān)于CSS3 無縫滾動(dòng) 防抖的資料請關(guān)注腳本之家其它相關(guān)文章！

文章來源：腳本之家，原文鏈接：https://www.jb51.net/css/745016.html

申請創(chuàng)業(yè)報(bào)道，分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處，共同探討創(chuàng)業(yè)新機(jī)遇！