html - 我如何创建滚动文本的动画，仅使用 HTML 和 CSS(或者我猜是 java)，就像苹果过去在其实时页面上使用的那样？

Question

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

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

我还希望白色文本是标题和该站点最近博客文章的非常简短的摘要。 (可能是 RSS 摘要)我不知道是否容易将其编码到其中，或者每次我有新博客文章时是否需要手动编码。

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

Answer 1

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

更新

您今天确实可以在没有 flash 或 JavaScript 的情况下做到这一点。您可以使用现代浏览器中的 关键帧 功能在现代浏览器中移动文本。我冒昧地做了一个演示这个概念的快速演示:(水平)http://jsfiddle.net/jonathansampson/XxUXD/ , 和(垂直)http://jsfiddle.net/jonathansampson/h7SYp/ .

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

旧答案

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

我鼓励您查看 Cycle Plugin对于 jQuery。