Jos*_*hua 6 html css animation canvas
我的网站顶部有一个横幅,蓝色,左侧有一个浅径向渐变.
我希望在横幅的右侧滚动向上滚动的白色文字.我希望它在显示时淡入,然后淡出.我想这样做而不使用Flash,尽可能少使用Java.我可以通过CSS工作并设置布局,但我不知道如何编码它以便动画可以工作.
我还希望白色文本将成为该网站最近博客文章的标题和简短摘要.(可能是RSS摘要)我不知道是否可以轻松编写代码,或者每次我有新的博客文章时我都需要手动编写代码.
经过一些基础研究后,我认为我正在寻找的是HTML 5画布,但我不确定.
Sam*_*son 12
更新:2015年10月21日:以下答案要求您明确提供诸如100em之类的值以实现偏移.这不太理想.相反,您可以翻译元素.
更新
你可以做到这一点今天不使用闪光灯或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转换为你想要的动画效果.
我鼓励你研究一下jQuery 的Cycle插件.