方法1:用HTML标签 - Marquees
HTML Marquee标签可以实现文字滚动效果,产生动态的效果。
Marquee标签在HTML 5中已经废弃,但是在较低版本的浏览器中仍然有效。
Marquee标签语法
<marquee>滚动的文字</marquee>
使用方向属性来指定滚动方向:
direction=”up” 向上滚动
direction=”down” 向下滚动
direction=”left” 向左滚动
direction=”right” 向右滚动
使用scrollamount属性来控制滚动的速度:
scrollamount=”数字” 数字越大速度越快
使用loop属性来设置滚动循环的次数:
loop=”数字” 数字为-1时表示无限循环
Marquee使用示例
<marquee>这个文字会无限循环向左滚动</marquee>
<marquee direction="up" scrollamount="1">这个文字会以较慢的速度向上滚动</marquee>
<marquee loop="3">这个文字会滚动3次</marquee>
Marquee标签可以简单实现文字滚动效果,但是在HTML 5中已被废弃,不建议使用。
可以使用JavaScript和CSS3实现更强大和标准的滚动效果。
方法2:用CSS制作
<div class="scroll-container"><div class="scroll-text">这里是文本滚动.<div> </div>
.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%); }
这里是文本滚动的示例…..