可以使用纯 HTML 的 <marquee> 标签实现跑马灯效果，虽然它已经不被推荐使用，但在某些简单的场景下仍然有效。 现代前端开发更推荐使用 CSS animations 或 JavaScript 来实现更灵活和可控的跑马灯效果。
以下是使用 <marquee> 的几种方式：
<!DOCTYPE html>
<html>
<head>
<title>跑马灯示例</title>
</head>
<body>
<!-- 简单的跑马灯，从右向左滚动 -->
<marquee>这是一条简单的跑马灯文本。</marquee>
<!-- 控制方向 -->
<marquee direction="right">从左向右滚动</marquee>
<marquee direction="up">从下向上滚动</marquee>
<marquee direction="down">从上向下滚动</marquee>
<!-- 控制速度 -->
<marquee scrollamount="10">快速滚动</marquee>
<marquee scrollamount="1">慢速滚动</marquee>
<!-- 控制行为 -->
<marquee behavior="scroll">循环滚动</marquee>
<marquee behavior="slide">滚动一次后停止</marquee>
<marquee behavior="alternate">来回滚动</marquee>
<!-- 控制循环次数 -->
<marquee loop="2">滚动两次</marquee>
<marquee loop="infinite">无限循环滚动</marquee>
<!-- 设置宽度和高度 -->
<marquee width="200" height="50" bgcolor="yellow">指定宽度和高度的跑马灯</marquee>
</body>
</html>
<marquee> 标签的属性：
direction: 滚动方向。left(默认),right,up,down。behavior: 滚动行为。scroll(默认, 循环滚动),slide(滚动一次后停止),alternate(来回滚动)。loop: 循环次数。 可以是数字或infinite(无限循环)。scrollamount: 滚动速度，值越大速度越快。scrolldelay: 滚动延迟，单位是毫秒。bgcolor: 背景颜色。width: 跑马灯宽度。height: 跑马灯高度。
为什么不推荐使用 <marquee>？
- 过时:
<marquee>标签在 HTML5 规范中已被废弃，不保证在未来的浏览器版本中得到支持。 - 可访问性差: 持续滚动的文本可能会对某些用户造成阅读困难，尤其是有阅读障碍的用户。
- 控制不够灵活:
<marquee>的样式和动画控制能力有限，难以实现复杂的动画效果。
更佳的替代方案：
使用 CSS animations 或 JavaScript 可以实现更灵活、更现代、可访问性更好的跑马灯效果。 以下是一个简单的 CSS animation 例子：
<!DOCTYPE html>
<html>
<head>
<title>CSS 跑马灯</title>
<style>
.marquee {
width: 200px;
overflow: hidden;
white-space: nowrap; /* 防止文本换行 */
}
.marquee span {
display: inline-block;
padding-left: 100%; /* 初始位置在容器外部 */
animation: marquee 5s linear infinite; /* 动画持续时间、速度、循环 */
}
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
</style>
</head>
<body>
<div class="marquee">
<span>使用 CSS 实现的跑马灯</span>
</div>
</body>
</html>
这个例子使用 CSS transform 属性和 animation 实现跑马灯效果，比 <marquee> 更灵活，也更容易控制样式和动画。 你可以根据需要调整动画的速度、方向和其他参数。 对于更复杂的跑马灯效果，可以使用 JavaScript 来实现更精细的控制。