css3怎么實現文字首尾銜接跑馬燈

本文將為大家詳細介紹“css3怎么實現文字首尾銜接跑馬燈”，內容步驟清晰詳細，細節處理妥當，而小編每天都會更新不同的知識點，希望這篇“css3怎么實現文字首尾銜接跑馬燈”能夠給你意想不到的收獲，請大家跟著小編的思路慢慢深入，具體內容如下，一起去收獲新知識吧。

故事背景

事情是這樣的，鹵煮無意間得知一款外放效果宇宙無敵第一的手機！！！腦袋一熱就趁著阿東618大促搞了一臺，畢竟鹵煮是一個地道的電子發燒友！！！但是當鹵煮查詢物流信息的時候。。。。。。

好吧，我這該死的探索欲，被這突兀的跑馬燈吸引住了目光（ca，今天看樣子是收不到貨了！！！）

那就說說怎么實現它吧（這個梗接的就是這么硬）

效果圖

邏輯描述

p標簽包含倆span標簽(提示的文字)，要兩個span，或者2個以上，p標簽定位，改變p標簽left值進行運動，運動到第一個span標簽的結尾處，看圖！！！當第二個span到達起始位置時，循環第二次運動，剛好會無縫銜接上。

無論PC還是移動端，當然了，走馬燈肯定移動端出現居多。按設計稿來，UI會給你span標簽文字的具體寬度，那么：運動距離=span寬度+兩個span之間的留白-左邊紅色區域的left值

代碼實現

html部分：

 <div id="app">
    <div class="top">
      <p>
        <span class="tips">由于大促期間訂單量激增，您的訂單送達時效可能出現延遲，請您耐心等待~</span>
        <span>由于大促期間訂單量激增，您的訂單送達時效可能出現延遲，請您耐心等待~</span>
      </p>
    </div>
    <div class="main">
      <h7>然后這里放的就是鹵煮</h7>
      <h5>外放堪稱手機圈</h5>
      <h3>宇宙無敵第一</h3>
      <h7>小米10 Pro</h7>
      <h3>wo不接受爭辯</h3>
      <h4>&middot;</h4>
      <h4>&middot;</h4>
      <h4>&middot;</h4>
      <h4>&middot;</h4>
    </div>
  </div>

css部分：

.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; }
    }
    /* 這里以下請忽略，重點在上面 */
    *{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%);
    }
    h2,h3,h4,h5,h6,h7{
      margin: 20px auto;
      text-align: center;
    }

個人總結

鹵煮在項目中有涉及到跑馬燈，而且鹵煮項目中用的是一個比較偷懶的方法，就是利用marquee標簽，這個就自帶跑馬燈效果好嘛！！！這個標簽很強大，一個標簽即可解決你寫一大堆css或者js，那我繞這么一大圈干嘛？

首先，它不能實現我這種首尾銜接！！！

其次，官網關于這個標簽的描述是這樣的：This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.

咳咳~考慮到英語不好的童鞋，翻譯一下就是： 元素已經過時，請不要再使用。盡管一些瀏覽器仍然支持它，但它不是必須的。此外，使用這個元素基本上是你可以對你的用戶做最糟糕的事情之一，所以請不要這樣做。

如果你能讀到這里，小編希望你對“css3怎么實現文字首尾銜接跑馬燈”這一關鍵問題有了從實踐層面最深刻的體會，具體使用情況還需要大家自己動手實踐使用過才能領會，如果想閱讀更多相關內容的文章，歡迎關注億速云行業資訊頻道！