滚动文字——跑马灯特效

      我们在网站升级之前往往需要先在站点做一个滚动的文字提示。 最近公司的一个站点也有这样的需求,而要实现这样的一个功能也不难。只需要了解一些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>



写法如下:


 要超连结的文字

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注