文字滚动

 //因为需要连续滚动，所以文本必须是两遍
 <div class="wrap">
     <div class="animate">我是文字</div>
     <div class="animate">我是文字</div>
 </div>

//不能设置居中样式，会导致 出现空白缺口
 .wrap{
    display: flex;
    justify-content: center !important;
    font-family: PingFangSC-Semibold;
    font-size: 36px;
    color: #ffffff;
 
       .animate {
          width: auto !important;  //宽度需要自适应！
          flex-shrink: 0;    //防止被挤压
          padding-right: 30px;  //两个name之间的距离
          box-sizing: border-box; //把padding变成自身样式
          white-space: nowrap;
          text-overflow: clip;
          animation: 15s wordsLoop linear infinite normal;//动画
      }
      @keyframes wordsLoop {
          0% {
              transform: translateX(0px);
              -webkit-transform: translateX(0px);
          }
          100% {
              transform: translateX(-100%);
              -webkit-transform: translateX(-100%);
          }
      }
   }