创建平滑的纯 CSS 文本滑块

心靈之曲

发布时间：2025-08-25 23:30:01

724人浏览过

来源于php中文网

原创

创建平滑的纯 css 文本滑块

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

实现原理

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

具体步骤

HTML 结构

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

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


  
    
      
         Fast Shipping
      

      
         100 Days Right of Return
      

      
         Buy with Invoice
      

      
         Proven Quality

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

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

关键帧的解释：