我如何创建一个滚动文本的动画，只使用 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?

提问by Joshua

I have a banner at the top of my website that is blue with a light radial gradient on the left side.

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

I want to have white text animated that scrolls up on the right side of the banner. I want it to fade in as it appears and then fade back out. I would like to do this without the use of Flash, and as little Java as possible. I can work my way through CSS and set up the layout, but I don't know how to code it so that the animation will work.

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

I'd also like the white text will be the titles and a very brief summary of recent blog posts for the site. (probably the RSS summary) I don't know if that's easy to code into it or if I'll need to hand code that every time I have a new blog post.

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

After some basic research I think what I'm looking for is HTML 5 canvas, but I'm not sure.

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

回答by Sampson

Update: 10/21/2015: The following answer required you to explicitly provide values such as 100em in order to achieve offsets. This is not ideal. Instead, you can translate the element.

更新：2015 年 10 月 21 日：以下答案要求您明确提供诸如 100em 之类的值以实现偏移。这并不理想。相反，您可以翻译 element。

Update

更新

You can indeed do this todaywithout flash or JavaScript. You can use the keyframesfeature in modern browsers to move text in modern browsers. I took the liberty to work up a quick demo demonstrating the concept: (horizontal) http://jsfiddle.net/jonathansampson/XxUXD/, and (vertical) http://jsfiddle.net/jonathansampson/h7SYp/.

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

Essentially we set the initial starting-point of the animation to text-indent: 100%to set it out of view and to the right. Then we set the last frame to text-indent: -100%, or whatever is needed to hide the text (will vary depending on character-length).

本质上，我们将动画的初始起点text-indent: 100%设置为将其设置在视野外和右侧。然后我们将最后一帧设置为text-indent: -100%，或隐藏文本所需的任何内容（将根据字符长度而有所不同）。

Old Answer

旧答案

You won't be able to do this without flash or Javascript. HTML is structure, while CSS is presentation. Neither of the two provide animation-capabilities. I would suggest you go a route that includes a small javascript framework like jQuery, as this can convert standard HTML into the animated effect that you desire.

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

I would encourage you to look into the Cycle Pluginfor jQuery.

我鼓励您查看jQuery的Cycle Plugin。

回答by Weatherman

What you need is JavaScript rather than flash or java.

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

JQueryis ideal for this type of animation. It's a JavaScript library that simplifies writing such JavaScript functions. There are many plug-ins available for jQuery that give similar functionality to what you require - have a look at JQuery Marquee

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

回答by Diodeus - James MacFarlane

You'll certainly need to use JavaScript, unless you want to use Flash. You cannot do it without a program.

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

Your best bet is to look into an animation library.

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

Scriptaculouscan do everything you describe, but doing what you describe is not for a JavaScript beginner.

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