用css无休止地滑动图像

时间:2014-01-27 00:11:43

标签: css

我想实现一个无限旋转但只使用css的图像滑块。我希望我可以通过webkits实现这一目标。

以下是我希望最终结果如下所示的示例:http://www.team-dignitas.net/

看看赞助商,图像向左移动,无限循环。他们已经完成了旋转木马jquery,但我想用css实现。可能吗?有没有人有我可以看到的指南来实现这个目标?

我尝试了什么:http://jsfiddle.net/3k4cJ/

html

1 个答案:

答案 0 :(得分: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 Cycle Image Slider”

选项2:http://www.alessioatzeni.com/CSS3-Cycle-Image-Slider/#

选项3:http://codepen.io/zuraizm/pen/vGDHl

选项4:http://benschwarz.github.io/gallery-css/