方法1：用HTML标签 - Marquees
HTML Marquee标签可以实现文字滚动效果,产生动态的效果。
Marquee标签在HTML 5中已经废弃,但是在较低版本的浏览器中仍然有效。
Marquee标签语法
[html] <marquee>滚动的文字</marquee>[/html]
使用方向属性来指定滚动方向:
direction=”up” 向上滚动
direction=”down” 向下滚动
direction=”left” 向左滚动
direction=”right” 向右滚动
使用scrollamount属性来控制滚动的速度:
scrollamount=”数字” 数字越大速度越快
使用loop属性来设置滚动循环的次数:
loop=”数字” 数字为-1时表示无限循环
Marquee使用示例
[html] <marquee>这个文字会无限循环向左滚动</marquee>[/html]
[html] <marquee direction="up" scrollamount="1">这个文字会以较慢的速度向上滚动</marquee> [/html]
[html] <marquee loop="3">这个文字会滚动3次</marquee>[/html]
Marquee标签可以简单实现文字滚动效果,但是在HTML 5中已被废弃,不建议使用。
可以使用JavaScript和CSS3实现更强大和标准的滚动效果。
方法2：用CSS制作
[html]<div class="scroll-container"><div class="scroll-text">这里是文本滚动.<div> </div>[/html]
[css]
.scroll-container {
border: 3px solid black;
border-radius: 5px;
overflow: hidden;
}
.scroll-text {
/* animation properties */
-moz-transform: translateX(100%);
-webkit-transform: translateX(100%);
transform: translateX(100%);
-moz-animation: my-animation 15s linear infinite;
-webkit-animation: my-animation 15s linear infinite;
animation: my-animation 15s linear infinite;
}
/* for Firefox */
@-moz-keyframes my-animation {
from { -moz-transform: translateX(100%); }
to { -moz-transform: translateX(-100%); }
}
/* for Chrome */
@-webkit-keyframes my-animation {
from { -webkit-transform: translateX(100%); }
to { -webkit-transform: translateX(-100%); }
}
@keyframes my-animation {
from {
-moz-transform: translateX(100%);
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
to {
-moz-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
[/css]
这里是文本滚动的示例…..
