如何擁有一個純流暢的 CSS Text Slider？

Question

我正在嘗試為顯示商店優勢的網店構建一個純 CSS 頂欄滑塊。 我讓它工作了，但是當下一張幻燈片淡入時，幻燈片（文本）與其他文本重疊一小段時間，看起來不太流暢。 有沒有辦法用純 CSS 來防止這種情況？ 滑塊僅適用於移動設備 (<992px)

最好的情況是幻燈片可以向左滑出並從右側滑入，但我認為這對於純 CSS 是不可能的。

如何防止文本重疊？

非常感謝任何幫助

加載的其他庫：

• 引導程序 4
• 字體真棒6

 .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: 0; } 12.5% { left: 0; } 25% { left: 100%; } 37.5% { left: 100%; } 50% { left: 100%; } 62.5% { left: 100%; } 75% { left: 100%; } 87.5% { left: 100%; } 95% { left: 0; } } @keyframes top-bar-animation-2 { 0% { left: 100%; } 12.5% { left: 100%; } 25% { left: 0; } 37.5% { left: 0; } 50% { left: 100%; } 62.5% { left: 100%; } 75% { left: 100%; } 87.5% { left: 100%; } 100% { left: 100%; } } @keyframes top-bar-animation-3 { 0% { left: 100%; } 12.5% { left: 100%; } 25% { left: 100%; } 37.5% { left: 100%; } 50% { left: 0; } 62.5% { left: 0; } 75% { left: 100%; } 87.5% { left: 100%; } 100% { left: 100%; } } @keyframes top-bar-animation-4 { 0% { left: 100%; } 12.5% { left: 100%; } 25% { left: 100%; } 37.5% { left: 100%; } 50% { left: 100%; } 62.5% { left: 100%; } 75% { left: 0; } 87.5% { left: 0; } 100% { left: 100%; } }

 <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.1/dist/css/bootstrap.min.css" rel="stylesheet" /> <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>

Answer 1

所以你只需要從left: 100%; （從右到左）到left: 0; （顯示） left: -100% （向左關閉）在最后並留在那里。 然后在下一個動畫循環開始時，一切都重置到left: 100%; 沒有動畫，所以你看不到向后移動，並且你有一個從右到左的連續流動。
這是一個片段來演示：

 .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%; } }

 <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.1/dist/css/bootstrap.min.css" rel="stylesheet" /> <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>

注意：我已經刪除了位置沒有變化的不需要的中間關鍵幀。