框架结束时CSS3动画闪烁

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

代码：

#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; 
 
    } 
 
}

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

来源

2016-07-05 snazi

什么是div的宽度和像素图像的宽度是多少？ – Diode

图像的宽度是3000像素，宽度div，我没有定义。 – snazi

我面临另一个问题，我张贴在below.if你帮我，这将是一个对我很感激 – snazi

我用我的系统中另一个图像，它并没有显示在screen..can任何一点闪烁ü给我你的形象。

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; 
 
    } 
 
}

来源

2016-07-05 14:02:41

谢谢。但对于图像没有工作..我怎么能把我的形象发送给你？非常感谢 – snazi

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

#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; 
 
    } 
 
}

<div id="bg1"> 
 
</div> 
 

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

来源

2016-07-05 14:11:12 Diode

框架结束时CSS3动画闪烁

回答

相关问题