Css3实现无缝滚动防抖

  发布时间:2020-09-14 16:23:09   作者:易涵123   我要评论
这篇文章主要介绍了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实现无缝滚动防抖的详细内容,更多关于CSS3 无缝滚动 防抖的资料请关注脚本之家其它相关文章!

相关文章

  • css3实现3d数字时钟滚动特效代码

    css3实现3d数字时钟滚动特效代码是一款splitting+css3实现的3D立体数字时钟实时滚动特效。
    2020-08-21
  • CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解

    这篇文章主要介绍了CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可
    2020-06-01
  • css3动画 小球滚动 js控制动画暂停

    CSS3 可以创建动画,它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果,需要的朋友参考下
    2019-11-29
  • CSS3改变浏览器滚动条样式

    浏览器滚动条太宽,太丑,影响日常开发怎么办,本文介绍了如何使用CSS3改变浏览器滚动条样式,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看
    2019-01-04
  • 纯css3实现的创意方块翻滚动画效果404页面源码

    这是一款基于纯css3实现的创意方块翻滚动画效果404页面源码。画面上带有4,0数字标记的立方体朝一个方向滚动,同时立方体下方滚动轨迹处会留下“404”的数字标记
    2018-04-21
  • 详解css3自定义滚动条样式写法

    这篇文章主要介绍了css3自定义滚动条样式写法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-25
  • CSS3 Calc实现滚动条出现页面不跳动问题

    calc是css3的一个新功能,用来指定元素的长度,calc()最大的好处就是用在流体布局上,可以通过calc()计算得到元素的宽度。接下来脚本之家小编给大家分享CSS3 Calc实现滚动
    2017-09-14
  • CSS3自定义滚动条样式的示例代码

    本篇文章主要介绍了CSS3自定义滚动条样式的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-21
  • 用CSS3实现无限循环的无缝滚动的实例代码

    这篇文章主要介绍了用CSS3实现无限循环的无缝滚动的实例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-04

最新评论