第一种方式：marquee标签
marquee标签其实就是一个用于制作跑马灯的标签
格式
<marquee>内容</marquee>
属性
marquee标签的属性主要有behavior、bgcolor、direction、width、height、hspace、vspace、loop、scrollamount、scrolldelay等，它们都是可选的
- width和height属性
width和height属性的作用决定滚动文字在页面中的矩形范围大小宽高，属性值可以为数字或百分比
<marquee width="300" height="100%">`跑马灯内容</marquee>
hspace和vspace属性
这两个属性决定滚动矩形区域跟周围空白区域的距离
<marquee width="300" height="30" vspace="10" hspace="10">跑马灯内容</marquee>
- align
设定marquee标签内容的对齐方式
| 属性值 | 描述 |
|---|---|
| absbottom | 绝对底部对齐 |
| absmiddle | 绝对中央对齐 |
| baseline | 底线对齐 |
| bottom | 底部对齐（默认） |
| left | 左对齐 |
| middle | 中间对齐 |
| right | 右对齐 |
| texttop | 顶线对齐 |
| top | 顶部对齐 |
<marquee align="absbottom">绝对底部对齐（与g、p等字母的最下端对齐）。</marquee>
<marquee align="absmiddle">绝对中央对齐。</marquee>
<marquee align="baseline">底线对齐。</marquee>
<marquee align="bottom">底部对齐（默认）。</marquee>
<marquee align="left">左对齐。</marquee>
<marquee align="middle">中间对齐。</marquee>
<marquee align="right">右对齐。</marquee>
<marquee align="texttop">顶线对齐。</marquee>
<marquee align="top">顶部对齐。</marquee>
- behavior
设定滚动的方式：
| 属性值 | 意义 |
|---|---|
| alternate | 表示在两端之间来回滚动。 |
| scroll | 表示由一端滚动到另一端，会重复。 |
| slide | 表示由一端滚动到另一端，不会重复。 |
<marquee behavior="alternate">表示在两端之间来回滚动。</marquee>
<marquee behavior="scroll">表示由一端滚动到另一端，会重复。</marquee>
<marquee behavior="slide">表示由一端滚动到另一端，不会重复。</marquee>
如果在marquee标签中同时出现了direction和behavior属性，那么scroll和slide的滚动方向将依照direction属性中参数的设置
- bgcolor
活动字幕背景颜色
- direction
活动字幕的滚动方向
| 属性值 | 描述 |
|---|---|
| up | 字幕向上滚动 |
| down | 字幕向下滚动 |
| left | 字幕向左滚动（默认） |
| right | 字幕向右滚动 |
<marquee direction="up">字幕的滚动方向：向上</marquee>
<marquee direction="down">字幕的滚动方向：向下</marquee>
<marquee direction="left">字幕的滚动方向：向左</marquee>
<marquee direction="right">字幕的滚动方向：向右</marquee>
- loop 设定滚动的次数，当loop为-1时表示一直滚下去，默认为-1
<marquee loop="-1">我会不停地走。</marquee>
<marquee loop="2">我只走两次哦</marquee>
- scrollmount
设定字幕的滚动速度，值越大越快，单位pixels
<marquee scrollamount="10">滚动内容</marquee>
- scrolldelay
设定字幕滚动两次之间的延迟时间，单位为millisecond（毫秒）
值太大会又一步一停顿的效果
<marquee scrolldelay="10">滚动内容</marquee>
事件
下面这两个事件经常用到：
onMouseOut="this.start()"：用来设置鼠标移出该区域时继续滚动
onMouseOver="this.stop()"：用来设置鼠标移入该区域时停止滚动
<marquee onMouseOut="this.start()" onMouseOver="this.stop()">鼠标移入该区域时停止滚动，鼠标移出该区域时继续滚动</marquee>
marquee标签不是W3C推荐的标签, 在W3C官方文档中也无法查询这个标签, 但是各大浏览器对这个标签的支持非常好
第二种方式：CSS3样式
使用CSS3中的animation属性
<div class="marquee-test"><p>不要只因一次挫败,就放弃你原来决心想达到的目的</p></div>
.marquee-test {
width: 100%;
height: 50px;
overflow: hidden;
position: relative;
white-space: nowrap;
}
p {
position: absolute;
animation: marquee 10s linear infinite;
}
@keyframes marquee {
from {
left: 100%;
}
to {
left: -100%
}
}
<!--第二种做法-->
<!--
@keyframes marquee {
from {
transform: translateX(100%);
}
to {
transform: translateX(-100%);
}
}
-->
