使用Marquee元素实现网页文字滚动

Marquee元素是指在网页上滚动字幕（文字、图像等），可以添加至HTML文件中。Marquee元素主要使用JavaScript来实现，但也可以使用CSS动画实现滚动效果。

使用HTML标签

可以通过使用<marquee>标签来实现文本滚动效果。下面是一个基本的HTML示例，用于实现垂直滚动效果。

<marquee behavior="scroll" direction="up" scrollamount="2"> 显示滚动文本 </marquee>

其中，各属性的含义如下：

• behavior：指定滚动行为，可以是scroll、slide或alternate。
• direction：指定滚动方向，可以是up、down、left或right。
• scrollamount：指定滚动速度，可以是数字或者快速、中速、慢速等。

上面示例会产生如下效果：

显示滚动文本

使用CSS实现

Marquee元素已不再符合现代浏览器的HTML和CSS标准，它的替代方案之一是使用CSS实现动画效果。

下面是一个使用CSS实现文本滚动效果的示例：

<p class="marquee">这是滚动的文本，展示CSS实现的滚动效果。</p>

.marquee {
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
}

.marquee:before {
  display: inline-block;
  width: 50%;
  content: '';
}

.marquee span {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 10s linear infinite;
}

@keyframes marquee {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-100%, 0); }
}

上面示例会产生如下效果：

这是滚动的文本，展示CSS实现的滚动效果。

总结

虽然Marquee元素已不能满足现代浏览器的HTML和CSS标准，但我们还是可以利用它来实现网络滚动效果。除此之外，还可以使用CSS实现动画效果，它不仅更加符合现代浏览器的HTML和CSS标准，而且提供更多自定义的选项。

参考资料：

• Marquee - HTML标签参考手册
• CSS实现跑马灯效果