CSS 3動畫 - 滑過屏幕

我有這個：http://d.pr/i/A2b3它充當頭和主要內容之間的分隔符。CSS 3動畫 - 滑過屏幕

圖像被設置爲標題容器的背景圖像repeat-x。

<header> <--- image is background of this 
    <div id="container"></div> 
</header>

我希望圖像在屏幕上緩慢地滑動，幾乎像波浪一樣。這可能與CCS3動畫？如果有人可以幫忙嗎？

感謝

來源

2013-02-20 Elliot

我會建議使用jQuery和簡單的圖像滑塊與縮短圖像停頓，因此圖像不斷切換。據我所知它不可能讓視頻出現在滑塊（不是沒有某種播放按鈕）。 http://www.catchmyfame.com/2009/06/04/jquery-infinite-carousel-plugin/將是我將使用的一個例子。

來源

2013-02-20 15:05:38

：displayTime：10000，到displayTime：1，（例如）上的開關保持圖像。（只需添加兩次相同的圖像） – 2013-02-20 15:08:45

想想你可能會錯過這一點。我不想要一個滑塊。這是一個在整個屏幕寬度上重複的圖像。但是，不是靜態的，我希望它看起來在整個頁面上移動。有點像這樣：http://jsfiddle.net/peterbenoit/npcaH/，但也從右向左移動。 – Elliot 2013-02-20 15:11:52

試試這個！

CSS：

header { 
    width: 100%; 
    height: 150px; 
    background-image: url(http://www.scottishheritageusa.org/imgs/header_separator.png); //replace with your image 
    background-position: 0px; 
    background-repeat: repeat-x; 
    -webkit-animation: myanim 5s infinite linear; 
     -moz-animation: myanim 5s infinite linear; 
     -o-animation: myanim 5s infinite linear; 
      animation: myanim 5s infinite linear; 
} 

@-webkit-keyframes myanim { 
    0% { background-position: 0px; } 
    100% { background-position: 100px; } /* set this to the width of the image */ 
} 
@-moz-keyframes myanim { 
    0% { background-position: 0px; } 
    100% { background-position: 100px; } /* set this to the width of the image */ 
} 
@-o-keyframes myanim { 
    0% { background-position: 0px; } 
    100% { background-position: 100px; } /* set this to the width of the image */ 
} 
@keyframes myanim { 
    0% { background-position: 0px; } 
    100% { background-position: 100px; } /* set this to the width of the image */ 
}

我創建了一個小提琴爲你在這裏玩：如果您更改 http://jsfiddle.net/e3WLD/3/

來源

2013-02-20 18:50:46 BDawg

CSS 3動畫 - 滑過屏幕

回答

相關問題