如何将页面上的每个元素变成滚动字幕？

Question

我可以对Web应用程序做些什么来将每个div变成滚动字幕吗？也许是CSS类？它是Angular 4和bootstrap。

Answer 1

以下演示是纯CSS解决方案 using CSS animation 。

---

演示

java.lang.RuntimeException: Unable to invoke no-args constructor for class com.tingyun.tads.api.JsonSerializableTest$A. Registering an InstanceCreator with Gson for this type may fix this problem.

.marquee {
  width: 60%;
  /* Required on Parent */
  overflow: hidden;
  font: 400 32px/1.5 Consolas;
  background: rgba(0, 0, 0, 0.7);
  padding-left: 15px;
  margin: 20px auto;
}

.marquee b {
  /* Required on Child*/
  white-space: nowrap;
  display: table-cell;
  color: cyan;
  vertical-align: baseline;
  /* Infinite Loops */
  animation: rightToLeft 12s linear infinite;
  /* Right to left direction */
  animation-fill-mode: backwards;
  /* Set to 0s in order to have a point of reference */
  animation-delay: 0s;
}

.marquee b a {
  color: gold
}


/* Required for complex CSS animation */

@keyframes rightToLeft {
  0% {
    transform: translateX(20%);
  }
  100% {
    transform: translateX(-100%);
  }
}

Answer 2

您是否尝试过字幕html元素？请注意，此方法已弃用。

<marquee>This text will scroll from right to left</marquee>

<marquee direction="up">This text will scroll from bottom to top</marquee>

<marquee direction="down" width="250" height="200" behavior="alternate" style="border:solid">
  <marquee behavior="alternate">
    This text will bounce
  </marquee>
</marquee>

MDN reference