時(shí)間：2024-02-24 02:05:01 | 來源：網(wǎng)站運(yùn)營
時(shí)間：2024-02-24 02:05:01 來源：網(wǎng)站運(yùn)營
Css3實(shí)現(xiàn)無縫滾動(dòng)防抖：這篇文章主要介紹了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) 防抖的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
文章來源：腳本之家，原文鏈接：https://www.jb51.net/css/745016.html
關(guān)鍵詞：滾動(dòng),實(shí)現(xiàn)
客戶&案例
營銷資訊
關(guān)于我們
微信公眾號(hào)
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
在線咨詢