CSS3 でテキストマーキーを実装するためのサンプルコード

 <div id="アプリ">
    <div class="top">
      <p>
        <span class="tips">プロモーション期間中は注文数が急増するため、ご注文の配送が遅れる場合があります。しばらくお待ちください～</span>
        <span>プロモーション期間中は注文が急増するため、ご注文の配送が遅れる場合があります。しばらくお待ちください～</span>
      </p>
    </div>
    <div class="main">
      <h6>それではシチューです</h6>
      <h4>携帯電話の外部スピーカーは最高です</h4>
      <h2>宇宙で最も無敵</h2>
      <h6>シャオミ 10 プロ</h6>
      <h2>議論は受け付けません</h2>
      <h3>·</h3>
      <h3>·</h3>
      <h3>·</h3>
      <h3>·</h3>
    </div>
  </div>

.ヒント{
      幅: 560ピクセル;
    }
    p{
      位置: 絶対;
      高さ: 34px;
      左: 34px;
      空白: ラップなし;
      ディスプレイ: フレックス;
      アニメーション: 12 秒間、無限に直線移動します。
      アニメーション遅延:3秒;
    }
    @keyframes 移動 {
      0%{ 左: 34px; }
      100%{ 左: -526px; }
    }
    /* 以下は無視してください。上記に重点が置かれています*/
    *{マージン: 0; パディング: 0;}
    本文、html{高さ: 100%;}
    ＃アプリ{
      高さ: 100%;
      背景:#ececec;
      マージン: 0 自動;
      ディスプレイ: フレックス;
      flex-direction: 列;
    }
    。主要{
      フレックス: 1;
    }
    。トップ{
      位置: 相対的;
      オーバーフロー: 非表示;
      高さ: 34px;
      背景: #fff;
    }
    .トップスパン{
      行の高さ: 34px;
      表示: インラインブロック;
    }
    .top::before{
      コンテンツ： "";
      位置: 絶対;
      左: 0;
      上: 0;
      高さ: 100%;
      幅: 34px;
      zインデックス: 9;
      背景画像: 線形グラデーション(90度、#f00 0%、#f00 60%、透明 100%);
    }
    .top::after{
      コンテンツ： "";
      位置: 絶対;
      右: 0;
      上: 0;
      高さ: 100%;
      幅: 34px;
      zインデックス: 9;
      背景画像: 線形グラデーション(-90度、#f00 0%、#f00 60%、透明 100%);
    }
    h1、h2、h3、h4、h5、h6{
      マージン: 20px 自動;
      テキスト配置: 中央;
    }