CSS3輸送帶效果

說我有這樣的：CSS3輸送帶效果

<ul id="belt"> 
    <li class="plate">First item here</li> 
    <li class="plate">Second item here</li> 
    <li class="plate">Third item here</li> 
    <li class="plate">Fourth item here</li> 
</ul>

如何使用CSS3，使平滑滾動傳送帶一樣的效果，在列表中向上滾動，最後一個項目之後的第一項在名單上，像一個戒指......？

來源

2011-07-26 Abhishek

我想你還需要一些javascript，因爲如果你向上滾動它，你必須添加/移動第一個元素到列表的底部 – Fender

是的，你是對的......嘆息... – Abhishek

對於很好的基於JS的解決方案，您可以查看[JQuery Tools Scrollable]（http://flowplayer.org/tools/）。 – sscirrus

你不能。不是在純CSS（3或其他）。

雖然你可以在JavaScript中做到這一點。

來源

2011-07-26 07:10:28 Ariel

我不知道...如果你添加了一些冗餘項目，我想你可能會用嵌套的div和CSS動畫來完成效果。（不幸的是沒有語義，但哦，它會完成它） – Nightfirecat

是的，你是對的...我在另一個網站上找到了一個純粹的JS解決方案...嘆息... – Abhishek

@Abhishek我建議你用BOTH JavaScript和CSS3做到這一點，使用CSS3動畫和JS重新排序元素。使用純JavaScript動畫是90多歲。 – zatatatata

CSS3輸送帶效果

回答

相關問題