[css3]css3は、最初と最後のテキスト実行例を実現するためのコード

 <div id="app">
    <div class="top">
      <p>
        <span class="tips"> Due to the surge of orders during the promotion, the delivery time of your order may be delayed, please be patient~</span>
        <span>Due to the surge of orders during the promotion, the delivery time of your order may be delayed, please wait patiently~</span>
      </p>
    </div>
    <div class="main">
      <h6> And then here's where you put the halogen</h6>
      <h4> out put can be called cell phone circle</h4>
      <h2>The universe is invincible first</h2>
      <h6>Xiaomi 10 Pro</h6>
      <h2>wo don't accept arguments</h2>
      <h3>-</h3>
      <h3>-</h3>
      <h3>-</h3>
      <h3>-</h3>
    </div>
  </div>

.tips{
      width: 560px;
    }
    p{
      position: absolute;
      height: 34px;
      left: 34px;
      white-space: nowrap;
      display: flex;
      animation: move linear 12s infinite;
      animation-delay:3s;
    }
    @keyframes move {
      0%{ left: 34px; }
      100%{ left: -526px; }
    }
    /* Ignore the following here, the focus is on the top */
    *{margin: 0; padding: 0;}
    body,html{height: 100%;}
    #app{
      height: 100%;
      background:#ececec;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
    }
    .main{
      flex: 1;
    }
    .top{
      position: relative;
      overflow: hidden;
      height: 34px;
      background: #fff;
    }
    .top span{
      line-height: 34px;
      display: inline-block;
    }
    .top::before{
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 34px;
      z-index: 9;
      background-image: linear-gradient(90deg,#f00 0%, #f00 60%, transparent 100%);
    }
    .top::after{
      content: "";
      position: absolute;
      right: 0;
      top: 0;
      height: 100%;
      width: 34px;
      z-index: 9;
      background-image: linear-gradient(-90deg,#f00 0%, #f00 60%, transparent 100%);
    }
    h1,h2,h3,h4,h5,h6{
      margin: 20px auto;
      text-align: center;
    }