我们在网站升级之前往往需要先在站点做一个滚动的文字提示。 最近公司的一个站点也有这样的需求,而要实现这样的一个功能也不难。只需要了解一些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
14、外围弹跳2
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>
写法如下:
要超连结的文字