Css3如何實(shí)現(xiàn)無(wú)縫滾動(dòng)防抖

這篇“Css3如何實(shí)現(xiàn)無(wú)縫滾動(dòng)防抖”文章，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要參考一下，對(duì)于“Css3如何實(shí)現(xiàn)無(wú)縫滾動(dòng)防抖”，小編整理了以下知識(shí)點(diǎn)，請(qǐng)大家跟著小編的步伐一步一步的慢慢理解，接下來(lái)就讓我們進(jìn)入主題吧。

問(wèn)題

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

錯(cuò)誤寫(xiě)法

不能用left，margin-left,像這種寫(xiě)法:

.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)無(wú)縫滾動(dòng)防抖”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！