滚动文字——跑马灯特效

      我们在网站升级之前往往需要先在站点做一个滚动的文字提示。 最近公司的一个站点也有这样的需求，而要实现这样的一个功能也不难。只需要了解一些html知识我们就可以办到。现我们将常见的文字跑马灯效果总结如下。

1、普通滚动

滚动文字普通滚动

<marquee>普通滚动</marquee>
2、向右滚动

向右滚动

向右滚动。

3、左右滚动

左右滚动

<marquee behavior="alternate">左右滚动</marquee>
4、向上滚动

向上滚动

<marquee direction="up">向上滚动</marquee>
5、向下滚动

向下滚动

向下滚动

6、上下反弹

上下反弹

上下反弹

7、抛物线滚动

你的文字

你的文字

8、到处摇摆

你的文字

你的文字

9、波动突出

>>你的文字<<

>>你的文字<<

10、波动突出2

<<<<<测试>>>>>

<<<<<测试>>>>>

<br />



11、加底色跑马灯

你的文字

你的文字

12、加外框跑马灯

你的文字

你的文字

13、外围弹跳

3| | |你的文字| | |4

3| | |你的文字| | |4

14、外围弹跳2

4| | |文字输这| | |3

4| | |文字输这| | |3

15、滚动加闪动

文字输入

文字输入

16、叠加波动

文字一
文字二

文字一
文字二

17、鼠标放上停止，移走运动

要跑的文字

要跑的文字

注：<span style="color:#000000;font-family:Simsun;font-size:small;font-style:normal;font-variant:normal;font-weight:normal;letter-spacing:normal;line-height:normal;orphans:2;text-align:start;text-indent:0px;text-transform:none;white-space:normal;widows:2;word-spacing:0px;-webkit-text-size-adjust:auto;-webkit-text-stroke-width:0px;"><span>在跑马灯</span></span><strong style="color:#000000;font-family:Simsun;font-size:small;font-style:normal;font-variant:normal;letter-spacing:normal;line-height:normal;orphans:2;text-align:start;text-indent:0px;text-transform:none;white-space:normal;widows:2;word-spacing:0px;-webkit-text-size-adjust:auto;-webkit-text-stroke-width:0px;"><span><span><marquee></span></span></strong><span style="color:#000000;font-family:Simsun;font-size:small;font-style:normal;font-variant:normal;font-weight:normal;letter-spacing:normal;line-height:normal;orphans:2;text-align:start;text-indent:0px;text-transform:none;white-space:normal;widows:2;word-spacing:0px;-webkit-text-size-adjust:auto;-webkit-text-stroke-width:0px;"><span>标签开始至</span></span><strong style="color:#000000;font-family:Simsun;font-size:small;font-style:normal;font-variant:normal;letter-spacing:normal;line-height:normal;orphans:2;text-align:start;text-indent:0px;text-transform:none;white-space:normal;widows:2;word-spacing:0px;-webkit-text-size-adjust:auto;-webkit-text-stroke-width:0px;"><span><span></marquee></span></span></strong><span style="color:#000000;font-family:Simsun;font-size:small;font-style:normal;font-variant:normal;font-weight:normal;letter-spacing:normal;line-height:normal;orphans:2;text-align:start;text-indent:0px;text-transform:none;white-space:normal;widows:2;word-spacing:0px;-webkit-text-size-adjust:auto;-webkit-text-stroke-width:0px;"><span>结尾，中间所包含的物件都会跟着跑，包含文字、图形、超连结...</span></span>



写法如下：

 要超连结的文字