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制作Dropdown下拉菜单的方法
Jul 18 HTML / CSS
基于DOM+CSS3实现OrgChart组织结构图插件
Mar 02 HTML / CSS
CSS3 实现的加载动画
Dec 07 HTML / CSS
Html5之svg可缩放矢量图形_动力节点Java学院整理
Jul 17 HTML / CSS
HTML5 新旧语法标记对我们有什么好处
Dec 13 HTML / CSS
使用CSS实现弹性视频html5案例实践
Dec 26 HTML / CSS
HTML5+CSS3实现拖放(Drag and Drop)示例
Jul 07 HTML / CSS
使用html2canvas.js实现页面截图并显示或上传的示例代码
Dec 18 HTML / CSS
Html5饼图绘制实现统计图的方法
Aug 05 HTML / CSS
Web前端:CSS最强总结 附详细代码
Mar 31 HTML / CSS
如何使用 resize 实现图片切换预览功能
Aug 23 HTML / CSS
Unicode中的CJK(中日韩统一表意文字)字符小结
Dec 06 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
德生9700DX电路分析
2021/03/02 无线电
php面向对象全攻略 (九)访问类型
2009/09/30 PHP
安装PHP扩展时解压官方 tgz 文件后没有configure文件无法进行配置编译的问题
2020/08/26 PHP
javascript知识点收藏
2007/02/22 Javascript
javascript实现unicode和字符的互相转换
2007/07/18 Javascript
json2.js的初步学习与了解
2011/10/06 Javascript
多种方法实现JS动态添加事件
2013/11/01 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
2014/02/26 Javascript
JS自定义对象实现Java中Map对象功能的方法
2015/01/20 Javascript
网页禁用右键菜单和鼠标拖动选择方法小结
2015/02/25 Javascript
Jquery实现瀑布流布局(备有详细注释)
2015/07/31 Javascript
JS生成不重复的随机数组的简单实例
2016/07/10 Javascript
微信小程序定义和调用全局变量globalData的实现
2019/11/01 Javascript
node运行js获得输出的三种方式示例详解
2020/07/02 Javascript
js正则表达式简单校验方法
2021/01/03 Javascript
简单了解Python下用于监视文件系统的pyinotify包
2015/11/13 Python
Python实现多线程抓取网页功能实例详解
2017/06/08 Python
PyCharm代码整体缩进,反向缩进的方法
2018/06/25 Python
pytz格式化北京时间多出6分钟问题的解决方法
2019/06/21 Python
Django框架ORM数据库操作实例详解
2019/11/07 Python
Python笔记之代理模式
2019/11/20 Python
python使用信号量动态更新配置文件的操作
2020/04/01 Python
Python之字典添加元素的几种方法
2020/09/30 Python
pycharm激活码2020最新分享适用pycharm2020最新版亲测可用
2020/11/22 Python
英国第一豪华护肤品牌:Elemis
2017/10/12 全球购物
意大利比基尼品牌:MISS BIKINI
2019/11/02 全球购物
Stührling手表官方网站:男女高品质时尚手表的领先零售商
2021/01/07 全球购物
大学英语演讲稿范文
2014/04/24 职场文书
幼儿园大班开学寄语
2014/08/02 职场文书
2015毕业生自我评价范文
2015/03/02 职场文书
教师求职简历自我评价
2015/03/10 职场文书
学雷锋献爱心倡议书
2015/04/27 职场文书
超搞笑婚前保证书
2015/05/08 职场文书
医院员工辞职信范文
2015/05/12 职场文书
领导欢送会主持词
2015/07/06 职场文书
element tree树形组件回显数据问题解决
2022/08/14 Javascript