2014-01-27 44 views
0

我想實現一個無限旋轉的圖像滑塊,但只能使用css。我希望我可以通過webkit實現。用css不斷滑動圖像

這裏是什麼,我想最終的結果看起來像一個例子:http://www.team-dignitas.net/

看贊助商,圖像會向左和無限循環。他們已經完成了旋轉木馬jquery,但我想用css來實現。可能嗎?有沒有人有指導我可以看看做到這一點?

我試了一下:http://jsfiddle.net/3k4cJ/

html 
+1

「無限」效果是通過將每個步驟中的一個元素從開始位置移動到結束來完成的。我不認爲這可以純粹用CSS來完成。 –

+0

你將要建立一個無限的CSS動畫。這裏有一篇關於這個問題的好文章。 [http://css-tricks.com/snippets/css/keyframe-animation-syntax/](http://css-tricks.com/snippets/css/keyframe-animation-syntax/) – badAdviceGuy

+1

告訴我們你的html和你到目前爲止的嘗試:) –

回答

3

你需要https://github.com/jsor/jcarousel正是在這個網站(https://www.dropbox.com/s/rgrif1ougt48z87/Screenshot%202014-01-27%2001.41.29.png)所使用的一個。這個演示的網頁現在已經停止,但你可以從Github上下載源代碼並在你的電腦上試用。

但是,如果你想純CSS會更好地學習CSS3動畫的基本概念。這篇文章是爲http://coding.smashingmagazine.com/2012/04/25/pure-css3-cycling-slideshow/非常好,用同樣的例子 「CSS3週期圖像滑塊」

選項2:http://www.alessioatzeni.com/CSS3-Cycle-Image-Slider/#

方案3:http://codepen.io/zuraizm/pen/vGDHl

方案4:http://benschwarz.github.io/gallery-css/

+0

答案更新了選項2. – skozz

+0

你是什麼意思,需要一些控制之前? – Bojan

+0

我的意思是在這個例子中必須創建像「next」和「prev」的控件。 – skozz