有什么方法可以使背景圖像動起來，以產生滾動/字幕效果？

Question

我已經嘗試了許多使用動畫關鍵幀的方法。 我似乎無法做到。

我基本上希望我的背景從左到右動畫並重復，就像選取框一樣，但作為背景。

看來對我來說唯一的解決方案是為我的背景制作一個gif，但這對我來說確實很耗時。

Answer 1

嘗試這個。

 #animate-area { width: 560px; height: 400px; background-image: url('http://labs.designoptimizer.net/snip/bg-clouds.png'); background-position: 0px 0px; background-repeat: repeat-x; animation: animatedBackground 40s linear infinite; } @keyframes animatedBackground { from { background-position: 0 0; } to { background-position: 100% 0; } } 

 <div id="animate-area"></div> 

Answer 2

為了避免動畫跳動（一旦到達末尾並重新開始），我將使用repeat-x將圖像移動到repeat-x的誇大數量的x坐標，如下所示：

 html { margin:0;padding:0; height:100%; } body { height:100%; background-image:url(https://i.imgur.com/aCDecXL.jpg); background-size: auto 100%; overflow:hidden; background-repeat:repeat-x; animation: scroll 700000s infinite linear; } @keyframes scroll { from { background-position: 0%; } to { background-position: 90000000%; } } 

Answer 3

使用動畫關鍵幀使其工作

 .background{ background: url(https://dummyimage.com/1500x700/); width: 560px; height: 400px; background-position: 0px 0px; background-repeat: repeat-x; background-size: cover; animation: animation_back 2s linear infinite; } @keyframes animation_back { from { background-position: 0 0; } to { background-position: 200% 0; } } 

 <div class="background"> </div>