如何将页面上的每个元素变成滚动字幕? [英] How do I turn every element on a page into a scrolling marquee?

问题描述

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

Is there something I can do to a web application that would turn every div into a scrolling marquee? Maybe a CSS class or something? It's Angular 4 and bootstrap.

推荐答案

以下演示是纯CSS解决方案

The following demo is a Pure CSS Solution using CSS animation.

.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%);
  }
}

<div class='marquee'>
  <b>You should read <i>"how to ask"</i>:&nbsp;<a href="https://stackoverflow.com/help/how-to-ask">https://stackoverflow.com/help/how-to-ask</a></b>
</div>

<div class='marquee'>
  <b>You can change the CSS ".marquee" class selector to "div" and then sit back and watch the chaos unfold.</b>
</div>

<div class='marquee'>
  <b>Making every div a scrolling marquee seems excessive and pointless.</b>
</div>

这篇关于如何将页面上的每个元素变成滚动字幕?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！