大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
本篇文章给大家分享的是有关使用CSS怎么实现背景无缝无限循环,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
10多年的临沧网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。成都营销网站建设的优势是能够根据用户设备显示端的尺寸不同,自动调整临沧建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。成都创新互联从事“临沧网站设计”,“临沧网站推广”以来,每个客户项目都认真落实执行。
HTML
CSS
.dog { width: 5.4rem; \\图片宽度 height: 3.04rem; \\图片高度 background-image: url(head.jpg); background-size: 5.4rem 3.04rem; \\图片宽高 background-position: -5.4rem 0; animation: run 2s linear infinite; } @keyframes run { from {background-position: -5.4rem 0;} to {background-position: 0 0;} }
3. 问题
在PC端,是没有问题的,但是在移动端(可能是重新计算字体大小导致的?)会发现移动速度与所设置的不一致,并且图片无法实现无缝。
4. 原因
未知,没找到相关资料,目测是动态计算font-size引起的问题。
5. 解决
经过测试发现若是在文件加载完毕后,给图片添加上动画则是正常。故修改代码:
JS
$(document).ready(function(){ remReSize(); setTimeout(function() { $('.dog').css('animation', 'run 2s linear infinite'); }, 0); });
以上就是使用CSS怎么实现背景无缝无限循环,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。