HTML5中与<marquee>标签等效的是什么？

Question

在HTML 4中，有一个<marquee>标签，可以在屏幕上显示滑动文本。
那么在HTML5中它的等效标签是什么？

- Computings

---

据我所知，没有。 - Álvaro González

尝试使用CSS动画。 - Muhammed Albarmavi

它已经被弃用了。你可能需要使用JavaScript，使用jQuery UI效果来实现应该很简单。查看这个演示，我想这就是你想要的：http://remysharp.com/2008/09/10/the-silky-smooth-marquee/ - Harsh Shah

相关：什么是<marquee>，我可以用它做什么？。另外：我能使用吗...。 - Álvaro González

在任何HTML规范中，都没有<marquee>标签，除了HTML5之外，它只是将其放置在那里以使其过时，以便浏览器供应商可以警告您将其删除。@HarshShah，您无法废弃规范中不存在的内容。 - Rob

Answer 1

通过使用 CSS 动画，您可以实现同样的效果。

.holder {
  background:#ccc;
  padding:0.5rem;
  overflow: hidden;
}
.news {
  animation : slide 10s linear infinite;
  
}

@keyframes slide {
  0% {
    transform: translatex(0%)
  }

  100% {
    transform: translatex(100%)
  }
}

<div class="holder">
  <div class="news">Hello....</div>
</div>

- Muhammed Albarmavi

---

这是一个很好的替代方案，在我的例子中非常感谢。 - Ahmad Yones

Answer 2

跑马灯标签不是HTML标准，也从未成为HTML标准。您可以通过JS/CSS自己创建这种行为。

另外，有一些库可供使用。其中一个选项是名为SuperMarquee的库，它还提供了Web组件版本。这与使用跑马灯标签非常接近。只需使用“super-marquee”标签即可。

- superplug-in

Answer 3

没有这样的替代方案。但可以使用CSS/JS来实现<marquee>提供的功能。

- daGo

Answer 4

您可以通过使用浏览器供应商特定的CSS和CSS3规范来实现这一点。

下面是一个例子：

{
  width: 200px; height: 50px; white-space: nowrap;
  overflow: hidden;
  overflow-x:-webkit-marquee;
  -webkit-marquee-direction: forwards;
  -webkit-marquee-style: scroll;
  -webkit-marquee-speed: normal;
  -webkit-marquee-increment: small;
  -webkit-marquee-repetition: 5;
  overflow-x: marquee-line;
  marquee-direction: forward;
  marquee-style: scroll;
  marquee-speed: normal;
  marquee-play-count: 5;
}

查看this的帖子，了解每个属性的解释

- Tarik Tutuncu

---

似乎在Firefox，Chrome或Edge中无法工作。我确信CSS已经足够强大，可以实现这样的效果，但可能需要使用过渡而不是这些专有属性。 - Álvaro González

@ÁlvaroGonzález，事实上，在短暂的时间内，这确实是正确的，但是跑马灯模块已经被W3C从CSS3规范中删除了。W3C建议使用过渡效果。个人认为，出于纪念的目的，我们应该保留它，但这只是我的想法。 - That Realty Programmer Guy