純CSS實現超長文字輪播（文字走馬燈）效果

　　在做看板的時候經常會遇到容器寬度不夠的情況，如果用超長省略會有點不好看，所以我就想做一個文字走馬燈的效果，一來可以不用鼠標懸浮就看到全文；二來可以為看板增添一下動畫效果，讓看板看起來更炫酷。我開始找解決方法的時候看到了HTML有一個marquee標簽，但是很遺憾現在這個標簽已經被廢棄了，然后我看了一些利用transform的寫法，但是一般都是在translateX寫了固定寬度，也不符合我想復用的要求，還有就是用js寫的，雖然js可以動態的計算寬度，但js做動畫需要定時器，后面用的話也沒有那么的方便，而且我代碼里還使用了vue-seamless-scroll做輪播，用js沒辦法綁定到組件里新加的dom，所以繞來繞去還是需要用純css解決。

　　廢話說得有點多，先看效果：

 HTML代碼：

  <ul class="list">
      <li class="item marquee">
        <div class="marquee-wrap">
          <div class="marquee-content ">
            這個是非超長數據
          </div>
        </div>
      </li>
      <li class="item marquee">
        <div class="marquee-wrap">
          <div class="marquee-content ">
            這個是超長數據，我超長了哦，我超長了哦，我超長了哦
          </div>
        </div>
      </li>
    </ul>
          

CSS代碼：

.marquee {
  overflow: hidden;
}

.marquee .marquee-wrap {
  width: 100%;
  animation: marquee-wrap 4s infinite linear;
}

.marquee .marquee-content {
  float: left;
  white-space: nowrap;
  min-width: 100%;
  animation: marquee-content 4s infinite linear;
}

@keyframes marquee-wrap {
  0%,
  30% {
    transform: translateX(0);
  }
  70%,
  100% {
    transform: translateX(100%);
  }
}

@keyframes marquee-content {
  0%,
  30% {
    transform: translateX(0);
  }
  70%,
  100% {
    transform: translateX(-100%);
  }
}

　　其實就是里外容器對向滾動，滾動的值為里外容器寬度的差值，如果里容器與外容器等寬，那么差值就為0，視覺上是沒有滾動的，就像第一條數據；如果里容器寬度比外容器寬，里容器向左滾動的距離比外容器向右滾動的距離大，就會形成滾動效果，並在里容器translateX為-100%外容器translate為100%時停下，視覺效果就是滾動到文字的最右側。

　　PS：里容器的float: left;是為了形成塊級格式化上下文，避免文字撐不開容器