创建平滑的纯 CSS 文本滑块

本文将指导你如何使用纯 CSS 创建一个平滑的文本滑块，解决文本重叠问题，并实现从右向左的滑动效果。通过调整关键帧的 left 属性，使文本在完全移出屏幕后才进行重置，从而避免滑动时的重叠现象，最终实现流畅的视觉体验。本教程提供详细的代码示例和关键步骤，助你轻松构建出美观实用的 CSS 文本滑块。

实现原理

核心思想在于控制每个文本项的 left 属性，使其从屏幕右侧移入，在屏幕上停留一段时间，然后移出屏幕左侧，并保持在屏幕外。在动画循环开始时，将文本项瞬间重置到屏幕右侧，由于这个重置没有动画效果，所以用户不会看到。

具体步骤

1. HTML 结构

   使用包含多个文本项的容器。每个文本项都应设置为绝对定位，以便可以通过 CSS 动画控制其位置。

   立即学习“前端免费学习笔记（深入）”；

   <div class="trev-top-bar overflow-hidden">
   <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，适用于对性能要求较高的场景。 掌握这种技术，可以为你的网站或应用程序增加吸引人的动态效果。