本文将指导你如何使用纯 css 创建一个平滑的文本滑块，解决文本重叠问题，并实现从右向左的滑动效果。通过调整关键帧的 left 属性，使文本在完全移出屏幕后才进行重置，从而避免滑动时的重叠现象，最终实现流畅的视觉体验。本教程提供详细的代码示例和关键步骤，助你轻松构建出美观实用的 CSS 文本滑块。
实现原理
核心思想在于控制每个文本项的 left 属性，使其从屏幕右侧移入，在屏幕上停留一段时间，然后移出屏幕左侧，并保持在屏幕外。在动画循环开始时，将文本项瞬间重置到屏幕右侧，由于这个重置没有动画效果，所以用户不会看到。
具体步骤
-
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 的图标。
-
CSS 样式
.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 可以控制每个文本项的出现时间。
-
引入必要的库
确保引入 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，适用于对性能要求较高的场景。 掌握这种技术，可以为你的网站或应用程序增加吸引人的动态效果。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
