仅使用 CSS 从右向左滚动的图像答案

【问题标题】：Images Scrolling From Right to Left with CSS only仅使用 CSS 从右向左滚动的图像
【发布时间】：2011-01-10 14:29:17
【问题描述】：

我有一个包含 10 个图像的 DIV。我想在不使用 JavaScript 的情况下从右向左滚动此 DIV 中的图像。有可能吗？

提前致谢。

【问题讨论】：

不，不是没有 CSS 过渡，当前非基于 webkit 的浏览器不支持。
其实火狐也支持。
你的意思是不使用滚动条？
@Dan 它们仅在 Firefox 4 Beta 中受支持，而不是发布版本。

标签： css

【解决方案1】：

简短的回答是：不，您不能使用纯 CSS 制作动画，至少现在还不能。 CSS 动画和变换已在卡片上，但尚未标准化，也没有得到足够广泛的支持以使其值得使用。

不过，话虽如此，你应该看看这个：

http://www.romancortes.com/blog/pure-css-coke-can/

仅使用标准 CSS 的巧妙滚动/滚动效果。没有 Javascript，没有 CSS 动画或转换。非常非常聪明。它甚至可以在 IE8 中运行。

当然，它使用了一些非常隐蔽的 CSS 技巧来实现这一点，所以这不是您将在日常代码中使用的技术。但问题是“有可能吗？”，而不是“如果不过度聪明和老套，有可能吗？”

【讨论】：

【解决方案2】：

http://www.the-art-of-web.com/css/css-animation/

感谢 Google 进行搜索 :)

就像上面的评论所说，这是 CSS3，所以你对浏览器的支持受到限制

【讨论】：

【解决方案3】：

可以通过使用 CSS3 特性的转换来实现，因此它在 IE 中不起作用。它确实适用于 ff3.6+ 和 chrome，但我不知道浏览器的重置，因为我没有时间测试它们。

https://developer.mozilla.org/en/CSS/CSS_transitions

【讨论】：

【解决方案4】：

没有。因为现在 CSS 无法处理动画。您将需要包含某种 javascript 来为您处理此问题。它并不像您想象的那么复杂，因为当前的框架为您完成了所有繁重的工作。我个人推荐 jQuery http://jquery.com/，但还有其他的。有些人已经解决了像您这样的问题并创建了插件，如果您不确定自己创建插件，您应该可以将其放到您的网站上，为您提供所需的功能http://plugins.jquery.com/

编辑

我应该补充一点，虽然某些 CSS 动画是可能的，但某些浏览器不支持它。

【讨论】：

【解决方案5】：

好吧，你只需给包含图像的 div 一个固定的 width 并通过 CSS 设置 whitespace: no-wrap。然后只需将overflow: auto 添加到 div 中，就可以了。

【讨论】：