CSS动漫完成情况无缝拼接无尽循环系统的完成示

日期:2021-01-20 类型:科技新闻 

关键词:商城网站建设,微商好助手,微商引流,电商网站模板,微信商家小程序

1. 要求

1张照片从左向右无尽循环系统挪动

2. 编码

因为是运用在挪动端,故应用rem企业,后边难题也产生在这。

HTML

<div class="dog"></div>

CSS

.dog {
    width: 5.4rem;                     \\照片宽度
    height: 3.04rem;                   \\照片高宽比
    background-image: url(head.jpg);
    background-size: 5.4rem 3.04rem;   \\照片宽高
    background-position: ⑸.4rem 0;
    animation: run 2s linear infinite;
}

@keyframes run {
    from {background-position: ⑸.4rem 0;}
    to {background-position: 0 0;}
}

3. 难题

在PC端,是沒有难题的,可是在挪动端(将会是再次测算字体样式尺寸致使的?)会发现挪动速率与所设定的不1致,而且照片没法完成无缝拼接。

4. 缘故

未知,没寻找有关材料,目测是动态性测算font-size引发的难题。

5. 处理

历经检测发现若是在文档载入结束后,给照片加上上动漫则是一切正常。故改动编码:

JS

$(document).ready(function(){
  remReSize();
  setTimeout(function() {
    $('.dog').css('animation', 'run 2s linear infinite');
  }, 0);
});

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。