Css3如何实现无缝滚动防抖

这篇“Css3如何实现无缝滚动防抖”文章，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要参考一下，对于“Css3如何实现无缝滚动防抖”，小编整理了以下知识点，请大家跟着小编的步伐一步一步的慢慢理解，接下来就让我们进入主题吧。

问题

图片加文字的无缝滚动，在手机端的效果总体还行，但是图片在手机某些浏览器会抖得腻害！

错误写法

不能用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如何实现无缝滚动防抖”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网行业资讯频道！