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实现横向无限滚动的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学2020-11-06
这篇文章主要介绍了CSS3制作圆形滚动进度条动画的示例，帮助大家制作CSS3特效，美化自身网页，感兴趣的朋友可以了解下2020-11-05
这篇文章主要介绍了css实现隐藏滚动条并可以滚动内容的实例代码,代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-11-03
3D小球滚动撞击遮挡板特效是一款基于css3绘制的3D立体的遮挡板，小球撞击来回滚动特效，感兴趣的朋友快来下载体验吧2020-09-21- 这篇文章主要介绍了css文字阴影渐渐模糊效果的实现,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-12-07
CSS3鼠标悬停按钮阴影缩放特效代码是一款红色简洁的方形按钮，鼠标悬停按钮突出放大阴影效果，非常漂亮。2020-11-18
这篇文章主要介绍了使用纯 CSS 实现滚动阴影效果,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-01-04
最新评论