欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Css3實現(xiàn)無縫滾動防抖

  發(fā)布時間：2020-09-14 16:23:09   作者：易涵123   我要評論
這篇文章主要介紹了Css3實現(xiàn)無縫滾動防抖的方法，幫助大家解決圖片抖動，感興趣的朋友可以了解下

問題

圖片加文字的無縫滾動，在手機端的效果總體還行，但是圖片在手機某些瀏覽器會抖得膩害！

錯誤寫法

不能用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;
  }
}

解決方法

里面的某個元素在手機端會抖動的膩害,改用二維的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實現(xiàn)無縫滾動防抖的詳細內(nèi)容，更多關(guān)于CSS3 無縫滾動 防抖的資料請關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

  • 純css3實現(xiàn)橫向無限滾動的示例代碼

    這篇文章主要介紹了純css3實現(xiàn)橫向無限滾動的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)
    2020-11-06

  • CSS3制作圓形滾動進度條動畫的示例

    這篇文章主要介紹了CSS3制作圓形滾動進度條動畫的示例，幫助大家制作CSS3特效，美化自身網(wǎng)頁，感興趣的朋友可以了解下
    2020-11-05

  • css實現(xiàn)隱藏滾動條并可以滾動內(nèi)容的實例代碼

    這篇文章主要介紹了css實現(xiàn)隱藏滾動條并可以滾動內(nèi)容的實例代碼,代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2020-11-03

  • CSS3實現(xiàn)3D小球滾動撞擊遮擋板特效源碼

    3D小球滾動撞擊遮擋板特效是一款基于css3繪制的3D立體的遮擋板，小球撞擊來回滾動特效，感興趣的朋友快來下載體驗吧
    2020-09-21

  • css文字陰影漸漸模糊效果的實現(xiàn)

    這篇文章主要介紹了css文字陰影漸漸模糊效果的實現(xiàn),本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2020-12-07

  • css3懸停按鈕-CSS3鼠標懸停按鈕陰影縮放特效代碼

    CSS3鼠標懸停按鈕陰影縮放特效代碼是一款紅色簡潔的方形按鈕，鼠標懸停按鈕突出放大陰影效果，非常漂亮。
    2020-11-18

  • 使用純 CSS 實現(xiàn)滾動陰影效果

    這篇文章主要介紹了使用純 CSS 實現(xiàn)滾動陰影效果,本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2021-01-04

最新評論