創建平滑的純 CSS 文本滑塊

本文將指導你如何使用純CSS 創建一個平滑的文本滑塊，解決文本重疊問題，並實現從右向左的滑動效果。通過調整關鍵幀的left 屬性，使文本在完全移出屏幕後才進行重置，從而避免滑動時的重疊現象，最終實現流暢的視覺體驗。本教程提供詳細的代碼示例和關鍵步驟，助你輕鬆構建出美觀實用的CSS 文本滑塊。

實現原理

核心思想在於控制每個文本項的left 屬性，使其從屏幕右側移入，在屏幕上停留一段時間，然後移出屏幕左側，並保持在屏幕外。在動畫循環開始時，將文本項瞬間重置到屏幕右側，由於這個重置沒有動畫效果，所以用戶不會看到。

具體步驟

1. HTML 結構

   使用包含多個文本項的容器。每個文本項都應設置為絕對定位，以便可以通過CSS 動畫控制其位置。

    <div class="trev-top-bar overflow-hidden" style="height: 56px;">
     <div class="container-fluid">
       <div class="row position-relative">
         <div class="col-12 col-md trev-top-bar-item text-center position-absolute">
           <i class="trev-top-bar-fa-icon fa-solid fa-truck-fast"></i> Fast Shipping
         </div>
   
         <div class="col-12 col-md trev-top-bar-item text-center position-absolute">
           <i class="trev-top-bar-fa-icon fa-solid fa-arrow-right-arrow-left"></i> 100 Days Right of Return
         </div>
   
         <div class="col-12 col-md trev-top-bar-item text-center position-absolute">
           <i class="trev-top-bar-fa-icon fa-solid fa-file-invoice-dollar"></i> Buy with Invoice
         </div>
   
         <div class="col-12 col-md trev-top-bar-item text-center position-absolute">
           <i class="trev-top-bar-fa-icon fa-solid fa-gears"></i> Proven Quality
         </div>
       </div>
     </div>
   </div>

   這裡使用了Bootstrap 的類來輔助佈局，並使用了Font Awesome 的圖標。

2. CSS 樣式

   • 設置容器的樣式，例如背景顏色、字體顏色、字體大小和內邊距。
   • 設置文本項的樣式，例如絕對定位。
   • 定義關鍵幀動畫，控制每個文本項的left 屬性。

    .trev-top-bar {
     background-color: #256dff;
     color: #fff;
     font-size: 14px;
     padding-top: 1rem;
     padding-bottom: 1rem;
   }
   
   .trev-top-bar .trev-top-bar-item:first-child {
     -webkit-animation: top-bar-animation-1 16s ease infinite;
     animation: top-bar-animation-1 16s ease infinite;
   }
   
   .trev-top-bar .trev-top-bar-item:nth-child(2) {
     -webkit-animation: top-bar-animation-2 16s ease infinite;
     animation: top-bar-animation-2 16s ease infinite;
   }
   
   .trev-top-bar .trev-top-bar-item:nth-child(3) {
     -webkit-animation: top-bar-animation-3 16s ease infinite;
     animation: top-bar-animation-3 16s ease infinite;
   }
   
   .trev-top-bar .trev-top-bar-item:nth-child(4) {
     -webkit-animation: top-bar-animation-4 16s ease infinite;
     animation: top-bar-animation-4 16s ease infinite;
   }
   
   .trev-top-bar .trev-top-bar-fa-icon,
   .trev-top-bar .icon {
     color: #fff;
     margin-right: .3rem;
   }
   
   .trev-top-bar .trev-top-bar-fa-icon {
     font-size: 16px;
   }
   
   .trev-top-bar .icon svg {
     width: 16px;
     height: 16px;
   }
   
   @keyframes top-bar-animation-1 {
     0% {
       left: 100%;
     }
     8.33% {
       left: 0;
     }
     16.66% {
       left: 0;
     }
     24.99% {
       left: -100%;
     }
     100% {
       left: -100%;
     }
   }
   
   @keyframes top-bar-animation-2 {
     0% {
       left: 100%;
     }
     24.99% {
       left: 100%;
     }
     33.33% {
       left: 0;
     }
     41.66% {
       left: 0;
     }
     49.99% {
       left: -100%;
     }
     100% {
       left: -100%;
     }
   }
   
   @keyframes top-bar-animation-3 {
     0% {
       left: 100%;
     }
     49.99% {
       left: 100%;
     }
     58.33% {
       left: 0;
     }
     66.66% {
       left: 0;
     }
     74.99% {
       left: -100%;
     }
     100% {
       left: -100%;
     }
   }
   
   @keyframes top-bar-animation-4 {
     0% {
       left: 100%;
     }
     74.99% {
       left: 100%;
     }
     83.33% {
       left: 0;
     }
     91.66% {
       left: 0;
     }
     100% {
       left: -100%;
     }
   }

   關鍵幀的解釋：

   • 0%: 文本項位於屏幕右側(left: 100%)。
   • 8.33% (對於第一個文本項): 文本項開始進入屏幕(left: 0)。
   • 16.66% (對於第一個文本項): 文本項完全顯示在屏幕上(left: 0)。
   • 24.99% (對於第一個文本項): 文本項開始移出屏幕(left: -100%)。
   • 100%: 文本項完全移出屏幕(left: -100%)。

   注意，每個文本項的動畫開始時間都不同，以實現連續的滑動效果。 調整animation-delay 可以控制每個文本項的出現時間。

3. 引入必要的庫

   確保引入Font Awesome 和Bootstrap 的CSS 文件。

    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet">
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet">

注意事項

• 確保容器具有overflow: hidden 樣式，以防止文本項溢出。
• 根據實際需求調整動畫時間和延遲，以獲得最佳的視覺效果。
• 避免在關鍵幀中使用不必要的中間狀態，簡化動畫過程。
• 如果需要支持更複雜的動畫效果（例如淡入淡出），可以考慮使用JavaScript 來輔助實現。

總結

通過以上步驟，你可以使用純CSS 創建一個平滑的文本滑塊，避免文本重疊問題，並實現從右向左的滑動效果。 這種方法簡單易懂，無需依賴JavaScript，適用於對性能要求較高的場景。 掌握這種技術，可以為你的網站或應用程序增加吸引人的動態效果。

以上是創建平滑的純 CSS 文本滑塊的詳細內容。更多資訊請關注PHP中文網其他相關文章！