Css3实现无缝滚动防抖


Posted in HTML / CSS onSeptember 14, 2020

问题

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

错误写法

不能用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 无缝滚动 防抖的资料请关注三水点靠木其它相关文章!

HTML / CSS 相关文章推荐
基于css3仿造window7的开始菜单
Jun 17 HTML / CSS
css3中检验表单的required,focus,valid和invalid样式
Feb 21 HTML / CSS
CSS3的RGBA中关于整数和百分比值的转换
Aug 04 HTML / CSS
详解HTML5新增标签
Nov 27 HTML / CSS
使用HTML5 IndexDB存储图像和文件的示例
Nov 05 HTML / CSS
让IE支持HTML5的方法
Dec 11 HTML / CSS
html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点
Jan 09 HTML / CSS
HTML5中Canvas与SVG的画图原理比较
Jan 16 HTML / CSS
HTML5中Localstorage的使用教程
Jul 09 HTML / CSS
处理HTML5新标签的浏览器兼容版问题
Mar 13 HTML / CSS
Adobe Html5 Extension开发初体验图文教程
Nov 14 HTML / CSS
iframe在移动端的缩放的示例代码
Oct 12 HTML / CSS
CSS3 border-radius圆角的实现方法及用法详解
Sep 14 #HTML / CSS
详解css3中dispaly的Grid布局与Flex布局
Sep 11 #HTML / CSS
CSS3动画和HTML5新特性详解
Aug 31 #HTML / CSS
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
Aug 24 #HTML / CSS
css3实现动画的三种方式
Aug 24 #HTML / CSS
使用CSS3实现字体颜色渐变的实现
Aug 10 #HTML / CSS
CSS3实现线性渐变用法示例代码详解
Aug 07 #HTML / CSS
You might like
PHP中file_get_contents函数抓取https地址出错的解决方法(两种方法)
2015/09/22 PHP
最准确的php截取字符串长度函数
2015/10/29 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
php递归函数怎么用才有效
2018/02/24 PHP
js RuntimeObject() 获取ie里面自定义函数或者属性的集合
2010/11/23 Javascript
什么是json和jsonp,jQuery json实例详详细说明
2012/12/11 Javascript
Microsfot .NET Framework4.0框架 安装失败的解决方法
2013/08/14 Javascript
jquery实现非叠加式的搜索框提示效果
2014/01/07 Javascript
js格式化时间和js格式化时间戳示例
2014/02/10 Javascript
基于javascript实现根据身份证号码识别性别和年龄
2016/01/22 Javascript
纯js和css完成贪吃蛇小游戏demo
2016/09/01 Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
2016/11/30 Javascript
jquery表单插件form使用方法详解
2017/01/20 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
2018/08/03 Javascript
JavaScript实现无限级递归树的示例代码
2019/03/29 Javascript
[44:50]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 TNC vs VG
2018/04/02 DOTA
Python中splitlines()方法的使用简介
2015/05/20 Python
Python实现将照片变成卡通图片的方法【基于opencv】
2018/01/17 Python
教你使用python画一朵花送女朋友
2018/03/29 Python
解决Pycharm界面的子窗口不见了的问题
2019/01/17 Python
python绘制已知点的坐标的直线实例
2019/07/04 Python
在python 中split()使用多符号分割的例子
2019/07/15 Python
Django框架安装方法图文详解
2019/11/04 Python
Python txt文件如何转换成字典
2020/11/03 Python
css3截图_动力节点Java学院整理
2017/07/11 HTML / CSS
CSS3的文字阴影—text-shadow的使用方法
2012/12/25 HTML / CSS
澳大利亚家具和家居用品在线商店:Interiors Online
2018/03/05 全球购物
database面试题
2013/03/28 面试题
学前教育专业毕业生自荐信
2013/10/03 职场文书
投标人廉洁自律承诺书
2014/05/26 职场文书
优秀纪检干部材料
2014/08/27 职场文书
致百米运动员广播稿5篇
2014/10/13 职场文书
法定代表人证明书
2014/11/28 职场文书
关于拾金不昧的感谢信
2015/01/21 职场文书
教你用Python+selenium搭建自动化测试环境
2021/06/18 Python
React Fragment介绍与使用详解
2021/11/11 Javascript