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 相关文章推荐
详解CSS的border边框属性及其在CSS3中的新特性
May 10 HTML / CSS
CSS3中文字镂空、透明值、阴影效果设置示例小结
Mar 07 HTML / CSS
css3+jq创作含苞待放的荷花
Feb 20 HTML / CSS
CSS3 display知识详解
Nov 25 HTML / CSS
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
Dec 29 HTML / CSS
使用CSS3实现SVG路径描边动画效果入门教程
Oct 21 HTML / CSS
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
Feb 27 HTML / CSS
canvas实现有递增动画的环形进度条的实现方法
Jul 10 HTML / CSS
使用html5+css3来实现slider切换效果告别javascript+css
Jan 08 HTML / CSS
使用 HTML5 Canvas 制作水波纹效果点击图片就会触发
Sep 15 HTML / CSS
基于HTML5的WebGL经典3D虚拟机房漫游动画
Nov 15 HTML / CSS
AmazeUI 评论列表的实现示例
Aug 13 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 CLI模式下的多进程应用分析
2013/06/03 PHP
解析用PHP实现var_export的详细介绍
2013/06/20 PHP
PHP基于imap获取邮件实例
2014/11/11 PHP
thinkphp中session和cookie无效的解决方法
2014/12/19 PHP
ThinkPHP3.2.2实现持久登录(记住我)功能的方法
2016/05/16 PHP
firefox下对ajax的onreadystatechange的支持情况分析
2009/12/14 Javascript
JavaScript与Div对层定位和移动获得坐标的实现代码
2010/09/08 Javascript
javascript函数式编程实例分析
2015/04/25 Javascript
javascript实现十秒钟后注册按钮可点击的方法
2015/05/13 Javascript
纯JavaScript实现的分页插件实例
2015/07/14 Javascript
jQuery+ajax读取并解析XML文件的方法
2016/09/09 Javascript
JQuery遍历元素的后代和同胞实现方法
2016/09/18 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
2017/01/26 Javascript
网页中右键功能的实现方法之contextMenu的使用
2017/02/20 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
2017/05/10 Javascript
nodeJs实现基于连接池连接mysql的方法示例
2018/02/10 NodeJs
基于vue v-for 循环复选框-默认勾选第一个的实现方法
2018/03/03 Javascript
vue实现移动端轻量日期组件不依赖第三方库的方法
2019/04/28 Javascript
js实现图片推拉门效果代码实例
2019/05/18 Javascript
Vue中图片Src使用变量的方法
2019/10/30 Javascript
python解决字典中的值是列表问题的方法
2013/03/04 Python
python实现自动重启本程序的方法
2015/07/09 Python
利用Python3分析sitemap.xml并抓取导出全站链接详解
2017/07/04 Python
PyCharm搭建Spark开发环境的实现步骤
2019/09/05 Python
基于Python实现ComicReaper漫画自动爬取脚本过程解析
2019/11/11 Python
tensorflow estimator 使用hook实现finetune方式
2020/01/21 Python
python中PyQuery库用法分享
2021/01/15 Python
玩具反斗城美国官网:Toys"R"Us
2016/09/17 全球购物
意大利在线眼镜精品店:Ottica Lipari
2019/11/11 全球购物
会计出纳岗位职责
2013/12/25 职场文书
中西医专业毕业生职业规划书
2014/02/24 职场文书
保险公司早会主持词
2014/03/22 职场文书
打造高效课堂实施方案
2014/03/22 职场文书
教师优秀党员事迹材料
2014/08/14 职场文书
实用干货:敬酒词大全,帮你应付各种场合
2019/11/21 职场文书
python数据处理之Pandas类型转换
2022/04/28 Python