框架結束時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動畫閃爍

回答

相關問題