Question

也许这是一个重复的问题，但我看到了很多教程，但我的问题一直存在。我想制作一个正在移动的背景图片。我做了代码，我从不同的教程中得到了它。但我的问题是：当框架完成时，在显示图像之前，我的屏幕上有一点点闪烁。我可以解决这个问题吗？问题，因为我希望有一个背景从右到左非常顺利地移动。让我告诉你，我只有一个图像，我只想用这个图像循环。图像的宽度大于我的屏幕。

代码：

＆＃13;

#bg {
  width: 100%;
  height: 100%;
  background: url("assets/css/images/day.jpg") repeat-x;
  -webkit-animation: backgroundScroll 60s linear infinite;
  animation: backgroundScroll 60s linear infinite;
  background-position: 0px 0px;
  z-index: -2;
}
@-webkit-keyframes backgroundScroll {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100% 0;
  }
}
@keyframes backgroundScroll {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100% 0;
  }
}

＆＃13;

<div id="bg">
</div>

＆＃13;

Answer 1

div的宽度应为背景图像宽度的x倍。其中x是整数。否则你将需要额外的计算

＆＃13;

#bg1, #bg2, #bg3 {
  height: 41px;
  background: url("https://www.google.co.in/logos/doodles/2016/juno-reaches-jupiter-5164229872058368-res.png") repeat-x;
  -webkit-animation: backgroundScroll 5s linear infinite;
  animation: backgroundScroll 5s linear infinite;
  background-position: 0px 0px;
}


#bg1{
  width: 190px; // 2x width
}

#bg2{
  width: 285px; // 3x width
}

#bg3{
  width: 250px; // random width
}

@-webkit-keyframes backgroundScroll {
  from {
    background-position: 0px 0px;
  }
  to {
    background-position: 100% 0px;
  }
}

@keyframes backgroundScroll {
  from {
    background-position: 0px 0px;
  }
  to {
    background-position: 100% 0px;
  }
}

＆＃13;

<div id="bg1">
</div>

<div id="bg2">
</div>
  
<br>
Wrong width
<div id="bg3">
</div>

＆＃13;

Answer 2

我在我的系统中使用了另一个图像，它没有在屏幕上显示任何小小的闪烁。你可以把你的图像发给我。

＆＃13;

html{width:100%; height:100%;}
body{width:100%; height:100%; box-sizing: border-box;}
#bg {
  width: 100%;
  height: 100%;
  background: url("../images/2.jpg") repeat-x;
  -webkit-animation: backgroundScroll 60s linear infinite;
  animation: backgroundScroll 60s linear infinite;
  background-position: 0px 0px;
  z-index: -2;
}
@-webkit-keyframes backgroundScroll {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100% 0;
  }
}
@keyframes backgroundScroll {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100% 0;
  }
}

＆＃13;

帧完成时CSS3动画闪烁

2 个答案: