创建平滑的纯 CSS 文本滑块

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

实现原理

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

具体步骤

1. HTML 结构

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

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

   
     
   
       
   
         
   
            Fast Shipping
         
   
         
   
            100 Days Right of Return
         
   
         
   
            Buy with Invoice
         
   
         
   
            Proven Quality
         
       
     
   

   这里使用了 Bootstrap 的类来辅助布局，并使用了 Font Awesome 的图标。

2. CSS 样式

   

   贝特协同办公系统(BetterCOS)

   具备更多的新特性： A.具有集成度更高的平台特点，集中体现了信息、文档在办公活动中交流的开放性与即时性的重要。 B.提供给管理员的管理工具，使系统更易于管理和维护。 C.产品本身精干的体系结构再加之结合了插件的设计思想，使得产品为用户度身定制新模块变得非常快捷。 D.支持对后续版本的平滑升级。 E.最价的流程管理功能。 F.最佳的网络安全性及个性化

   下载
   • 设置容器的样式，例如背景颜色、字体颜色、字体大小和内边距。
   • 设置文本项的样式，例如绝对定位。
   • 定义关键帧动画，控制每个文本项的 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 文件。

注意事项

• 确保容器具有 overflow: hidden 样式，以防止文本项溢出。
• 根据实际需求调整动画时间和延迟，以获得最佳的视觉效果。
• 避免在关键帧中使用不必要的中间状态，简化动画过程。
• 如果需要支持更复杂的动画效果（例如淡入淡出），可以考虑使用 JavaScript 来辅助实现。

总结

通过以上步骤，你可以使用纯 CSS 创建一个平滑的文本滑块，避免文本重叠问题，并实现从右向左的滑动效果。 这种方法简单易懂，无需依赖 JavaScript，适用于对性能要求较高的场景。 掌握这种技术，可以为你的网站或应用程序增加吸引人的动态效果。