如何像苹果过去在他们的 livepage 上那样只使用 HTML 和 CSS（或者我猜是 java）创建滚动文本的动画？

Posted 2023-03-05

【中文标题】如何像苹果过去在他们的 livepage 上那样只使用 HTML 和 CSS（或者我猜是 java）创建滚动文本的动画？

【英文标题】：How do I create an animation of scrolling text with just HTML and CSS (or java i guess) like apple used to have on their livepage?

【发布时间】：2011-01-09 07:29:21

【问题描述】：

我的网站顶部有一个蓝色横幅，左侧有浅径向渐变。

我想要在横幅右侧向上滚动的白色文本动画。我希望它在出现时淡入，然后淡出。我想在不使用 Flash 和尽可能少的 Java 的情况下做到这一点。我可以通过 CSS 工作并设置布局，但我不知道如何对其进行编码以使动画正常工作。

我还希望白色文本是网站最近博客文章的标题和非常简短的摘要。 （可能是 RSS 总结）我不知道这是否容易编写代码，或者我是否需要在每次有新博客文章时手动编写代码。

经过一些基础研究，我认为我正在寻找的是 html 5 画布，但我不确定。

【参考方案1】：

更新：2015 年 10 月 21 日：以下答案要求您明确提供 100em 等值以实现偏移。这并不理想。相反，you can translate the element。

更新

今天你确实可以在没有 Flash 或 javascript 的情况下做到这一点。您可以使用现代浏览器中的keyframes 功能在现代浏览器中移动文本。我冒昧地制作了一个演示概念的快速演示：（水平）http://jsfiddle.net/jonathansampson/XxUXD/，和（垂直）http://jsfiddle.net/jonathansampson/h7SYp/。

本质上，我们将动画的初始起点设置为text-indent: 100%，以将其设置在视线之外和右侧。然后我们将最后一帧设置为text-indent: -100%，或者隐藏文本所需的任何内容（取决于字符长度）。

旧答案

如果没有 Flash 或 Javascript，您将无法做到这一点。 HTML 是结构，而 CSS 是表示。两者都不提供动画功能。我建议你走一条包含像 jQuery 这样的小型 javascript 框架的路线，因为它可以将标准 HTML 转换为你想要的动画效果。

我鼓励您查看Cycle Plugin 的 jQuery。

【讨论】：

这似乎不适用于原始文本，还是我遗漏了什么？

@JonathanSampson with chromium v​​. 22 and midori v. 0.4.3 on raspberry with raspbian

最新版本（翻译元素）越长越快...

【参考方案2】：

您需要的是 JavaScript 而不是 flash 或 java。

JQuery 非常适合这种类型的动画。它是一个 JavaScript 库，可简化此类 JavaScript 函数的编写。有许多可用于 jQuery 的插件，它们提供与您需要的功能相似的功能 - 请查看 JQuery Marquee

【讨论】：

同意。作为 Web 开发新手也不要被 jQuery 吓倒，它非常易于使用。

javascript能在iphone上运行吗？

是的，iPhone 上的 Safari 可以很好地处理 JavaScript

【参考方案3】：

您当然需要使用 JavaScript，除非您想使用 Flash。没有程序你就做不到。

最好的办法是查看动画库。

Scriptaculous 可以做你描述的所有事情，但做你描述的事情并不适合 JavaScript 初学者。