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动画和opacity透明度实现呼吸灯效果
Aug 09 HTML / CSS
css3.0 图形构成实例练习二
Mar 19 HTML / CSS
css3 伪元素和伪类选择器详解
Sep 04 HTML / CSS
CSS3圆角和渐变2种常用功能详解
Jan 06 HTML / CSS
详解CSS3原生支持div铺满浏览器的方法
Aug 30 HTML / CSS
HTML5中FileReader接口使用方法实例详解
Aug 26 HTML / CSS
Html5画布_动力节点Java学院整理
Jul 13 HTML / CSS
HTML5 Geolocation API的正确使用方法
Dec 04 HTML / CSS
浅谈cookie和localStorage那些事
Aug 27 HTML / CSS
浅谈h5自定义audio(问题及解决)
Aug 19 HTML / CSS
使用postMessage让 iframe自适应高度的方法示例
Oct 08 HTML / CSS
浅谈css清除浮动(clearfix和clear)的用法
May 21 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
Windows中安装Apache2和PHP4权威指南
2006/11/18 PHP
不用mod_rewrite直接用php实现伪静态化页面代码
2008/10/04 PHP
PHP防盗链的基本思想 防盗链的设置方法
2015/09/25 PHP
PHP随手笔记整理之PHP脚本和JAVA连接mysql数据库
2015/11/25 PHP
php写一个函数,实现扫描并打印出自定目录下(含子目录)所有jpg文件名
2017/05/26 PHP
jQuery.autocomplete 支持中文输入(firefox)修正方法
2011/03/10 Javascript
javascript使用location.search的示例
2013/11/05 Javascript
鼠标滚轮改变图片大小的示例代码
2013/11/20 Javascript
jquery1.10给新增元素绑定事件的方法
2014/03/06 Javascript
jquery自动将form表单封装成json的具体实现
2014/03/17 Javascript
jquery文本框中的事件应用以输入邮箱为例
2014/05/06 Javascript
JQuery设置时间段下拉选择实例
2014/12/30 Javascript
js判断手机端(Android手机还是iPhone手机)
2015/07/22 Javascript
详谈JS中数组的迭代方法和归并方法
2017/08/11 Javascript
vue父组件向子组件传递多个数据的实例
2018/03/01 Javascript
vue2中使用less简易教程
2018/03/27 Javascript
vue路由组件按需加载的几种方法小结
2018/07/12 Javascript
Node.js之readline模块的使用详解
2019/03/25 Javascript
如何让Nodejs支持H5 History模式(connect-history-api-fallback源码分析)
2019/05/30 NodeJs
Vue-CLI与Vuex使用方法实例分析
2020/01/06 Javascript
js操作两个json数组合并、去重,以及删除某一项元素
2020/09/22 Javascript
vue3.0中setup使用(两种用法)
2020/12/02 Vue.js
selenium+python 去除启动的黑色cmd窗口方法
2018/05/22 Python
python 实现调用子文件下的模块方法
2018/12/07 Python
django框架基于模板 生成 excel(xls) 文件操作示例
2019/06/19 Python
python 有效的括号的实现代码示例
2019/11/11 Python
美国隐形眼镜销售网站:ContactsDirect
2017/10/28 全球购物
ABOUT YOU罗马尼亚:超过600个时尚品牌
2019/09/19 全球购物
群众路线领导对照材料
2014/08/23 职场文书
爱的奉献演讲稿
2014/09/10 职场文书
2014年教师节座谈会发言稿
2014/09/10 职场文书
党员组织生活会发言材料
2014/10/17 职场文书
酒店工程部主管岗位职责
2015/04/16 职场文书
七年级数学教学反思
2016/02/17 职场文书
2019如何书写演讲稿?
2019/07/01 职场文书
【DOTA2】半决赛强强对话~ PSG LGD vs EHOME - DPC 2022 CN REGIONAL FINALS WINTER
2022/04/02 DOTA