本文将指导你如何使用纯 CSS 创建一个平滑的文本滑块，解决文本重叠问题，并实现从右向左的滑动效果。通过调整关键帧的 left 属性，使文本在完全移出屏幕后才进行重置，从而避免滑动时的重叠现象，最终实现流畅的视觉体验。本教程提供详细的代码示例和关键步骤，助你轻松构建出美观实用的 CSS 文本滑块。
实现原理
核心思想在于控制每个文本项的 left 属性，使其从屏幕右侧移入，在屏幕上停留一段时间，然后移出屏幕左侧，并保持在屏幕外。在动画循环开始时，将文本项瞬间重置到屏幕右侧，由于这个重置没有动画效果，所以用户不会看到。
具体步骤
HTML 结构
使用包含多个文本项的容器。每个文本项都应设置为绝对定位，以便可以通过 CSS 动画控制其位置。
立即学习“前端免费学习笔记（深入）”；
这里使用了 Bootstrap 的类来辅助布局，并使用了 Font Awesome 的图标。
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 可以控制每个文本项的出现时间。
引入必要的库
确保引入 Font Awesome 和 Bootstrap 的 CSS 文件。
注意事项
确保容器具有 overflow: hidden 样式，以防止文本项溢出。根据实际需求调整动画时间和延迟，以获得最佳的视觉效果。避免在关键帧中使用不必要的中间状态，简化动画过程。如果需要支持更复杂的动画效果（例如淡入淡出），可以考虑使用 JavaScript 来辅助实现。
总结
通过以上步骤，你可以使用纯 CSS 创建一个平滑的文本滑块，避免文本重叠问题，并实现从右向左的滑动效果。 这种方法简单易懂，无需依赖 JavaScript，适用于对性能要求较高的场景。 掌握这种技术，可以为你的网站或应用程序增加吸引人的动态效果。
以上就是创建平滑的纯 CSS 文本滑块的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1573565.html
微信扫一扫 
支付宝扫一扫 
