实现文字跑马灯的两种方式

实现文字跑马灯的两种方式

1. html实现

• 使用 marquee 标签，配合它的一些属性，可以实现功能强大的跑马灯文字，

<marquee> 跑马灯 html实现 </marquee>

• 但是，这个 marquee 标签，并没有被W3C标准录入，也就是在未来的某个时候，它可能会被弃用，请慎用

为什么这么好的东东，不被认同呢？
在W3C标准中,规定功能性分离。分成为结构、样式、行为三个部分，这三个部分分别包括了，结构（xHTML、XML），样工（CSS），行为（DOM、ECMAScript）。
marquee 已经不只是结构html了，它可以实现js， css的功能。

2. css实现

• 使用css3非常简单

  <div class="marquee">
    <span class="marquee-txt">跑马灯 css实现</span>
  </div>

• css

.marquee{
  height: 25px;
  line-height: 25px;
  box-sizing: border-box;
  word-break: break-all;
  white-space: nowrap;
  overflow: hidden;
  .marquee-txt{
    display: inline-block;
    padding-left: 100%;  /* 从右至左开始滚动 */
    animation: marqueeTransform 16s linear infinite;
  }
  @keyframes marqueeTransform {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
  }
}