css实现文字从右边到左边滚动

// 下面的以rem为大小的可以乘以14转成px单位

.scroll {
  display: inline-block;
  white-space: pre;
  -webkit-animation: 18s scroll linear infinite normal;
  animation: 18s scroll linear infinite normal;
  position: absolute;
}
.scrollWrap {
  margin-left: 20px;
  margin-right: 20px;
  position: absolute;
  width: calc(100% - 40px);
  height: 2rem;
  line-height: 2rem;
  overflow: hidden;
  font-size: 12px;
  color: #a27139;
  background: #fcebd7;
  border-radius: 4px;
  bottom: 2rem;
}

@keyframes scroll {

  0% {
    //可以将100%改成0看一下另一种效果
    transform: translateX(100%);

    -webkit-transform: translateX(100%);
  }

  100% {
    transform: translateX(-100%);

    -webkit-transform: translateX(-100%);
  }
}

        <div className="scrollWrap">
          　<div className="scroll">
            　CSS 1     文字从左到右滚动(所需要滚动的文字)
            　 　CSS 2     文字从左到右滚动(所需要滚动的文字)
            　 　 　CSS   3   文字从左到右滚动(所需要滚动的文字)
          </div>
        </div>