如何拥有一个纯流畅的 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>

注意：我已经删除了位置没有变化的不需要的中间关键帧。