向动画 CSS3 横幅添加项目时遇到问题？答案

【问题标题】：Issues with adding items to an animated CSS3 banner?向动画 CSS3 横幅添加项目时遇到问题？
【发布时间】：2014-05-23 02:17:28
【问题描述】：

尝试添加最多 10 个文本

项添加到动画 CSS3 横幅中。在显示项目时遇到问题。想知道是否有更简单的方法来做这样的动画：http://jsfiddle.net/zp6B8/1/

<div class="marquee">
    <p><a href="http://www.google.com">Advertisement 1</a></p>
    <p><a href="http://www.google.com">Advertisement 2</a></p>
    <p><a href="http://www.google.com">Advertisement 3</a></p>
</div>

【问题讨论】：

@Adrift 我使用的是 Chrome 34.0。等待横幅更改，广告 3 与广告 2 文本重叠。
拿去没人能帮忙？！
@userry22 我的回答对你有帮助吗？

标签： javascript jquery html css

【解决方案1】：

这是在 CSS 中放置行为的问题。由于该语言没有计算抽象（例如简单的 for 循环），因此您必须将所有 css 更新为幻灯片数量的硬代码。

也就是说，有几种方法可以减轻这种痛苦：

您可以使用像 stylus 这样的 css 预处理器语言，它可以为您提供更简洁的语法（没有供应商前缀）以及一些基本的抽象。但是，即使预处理器为您生成大部分 css，您仍然必须保留硬编码的幻灯片数量。
您可以从 javascript 动态生成 css。例如，您可以编写 javascript 来计算幻灯片的数量并生成 css3 动画代码，然后将其附加到页面的 <head>。
您不能直接使用 css3 动画，而是完全从 javascript 中使用它。例如，您可以将所有幻灯片设置为具有过渡时间，然后使用 javascript 来移动这些幻灯片。
您可以只使用 javascript 动画，jQuery、tween.js 或 gsap。
您可以完全放弃，只使用预先存在的 javascript 幻灯片放映。

【讨论】：