Css3實(shí)現(xiàn)無縫滾動防抖
發(fā)布時間：2020-09-14 16:23:09 作者：易涵123 
我要評論
我要評論這篇文章主要介紹了Css3實(shí)現(xiàn)無縫滾動防抖的方法，幫助大家解決圖片抖動，感興趣的朋友可以了解下
問題
圖片加文字的無縫滾動，在手機(jī)端的效果總體還行，但是圖片在手機(jī)某些瀏覽器會抖得膩害！
錯誤寫法
不能用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;
}
}
解決方法
里面的某個元素在手機(jī)端會抖動的膩害,改用二維的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)無縫滾動防抖的詳細(xì)內(nèi)容，更多關(guān)于CSS3 無縫滾動 防抖的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
- 這篇文章主要介紹了純css3實(shí)現(xiàn)橫向無限滾動的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)2020-11-06
這篇文章主要介紹了CSS3制作圓形滾動進(jìn)度條動畫的示例，幫助大家制作CSS3特效，美化自身網(wǎng)頁，感興趣的朋友可以了解下2020-11-05
css實(shí)現(xiàn)隱藏滾動條并可以滾動內(nèi)容的實(shí)例代碼
這篇文章主要介紹了css實(shí)現(xiàn)隱藏滾動條并可以滾動內(nèi)容的實(shí)例代碼,代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-11-03
CSS3實(shí)現(xiàn)3D小球滾動撞擊遮擋板特效源碼
3D小球滾動撞擊遮擋板特效是一款基于css3繪制的3D立體的遮擋板，小球撞擊來回滾動特效，感興趣的朋友快來下載體驗(yàn)吧2020-09-21- 這篇文章主要介紹了css文字陰影漸漸模糊效果的實(shí)現(xiàn),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-12-07
css3懸停按鈕-CSS3鼠標(biāo)懸停按鈕陰影縮放特效代碼
CSS3鼠標(biāo)懸停按鈕陰影縮放特效代碼是一款紅色簡潔的方形按鈕，鼠標(biāo)懸停按鈕突出放大陰影效果，非常漂亮。2020-11-18
這篇文章主要介紹了使用純 CSS 實(shí)現(xiàn)滾動陰影效果,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-01-04
