CSS动画如何实现导航栏文字滚动_transform translateX @keyframes控制

通过CSS的@keyframes和transform:translateX()实现文字滚动，首先构建HTML结构，再设置容器溢出隐藏与文字不换行，利用关键帧定义从右到左的位移动画，使文字匀速无限循环滚动，适用于导航栏或通知条，可通过调整时间、性能优化及双倍文字拼接提升效果。

导航栏文字滚动效果可以通过 CSS 的 @keyframes 和 transform: translateX() 实现，常用于展示连续滚动的标语、通知或标签。下面介绍具体实现方法。

1. 基本结构（HTML）

先搭建简单的 HTML 结构，包含一个容器和要滚动的文字内容：

  
    欢迎访问我们的网站 - 最新优惠不断 - 点击了解更多 - 提供优质服务
  

2. 样式布局（CSS）

设置容器为横向溢出隐藏，内部文字超出宽度并允许滚动：

.scroll-container {
  white-space: nowrap;        /* 防止换行 */
  overflow: hidden;           /* 隐藏溢出部分 */
  width: 100%;
  background-color: #f0f0f0;
  padding: 10px 0;
}
.scroll-text {
display: inline-block;      / 使 transform 生效 /
font-size: 18px;
color: #333;
}

3. 使用 @keyframes 定义滚动动画

通过 @keyframes 控制 translateX 从右到左移动文字：

@keyframes scrollText {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}
.scroll-text {
animation: scrollText 15s linear infinite;
}

说明：

• translateX(100%)：开始时文字完全在容器右侧外
• translateX(-100%)：结束时文字完全移到左侧外
• linear：匀速滚动
• infinite：无限循环
• 15s：滚动周期，可根据文字长度调整

4. 优化体验建议

为了让滚动更自然，可以考虑以下优化：

• 若文字较长，可适当增加动画时间，避免太快
• 使用 will-change: transform 提升动画性能
• 在移动端可添加媒体查询控制是否启用动画
• 若需无缝滚动，可用双倍文字拼接并调整位移范围

基本上就这些。用 @keyframes 配合 transform: translateX 实现文字滚动，高效且兼容性好，适合用在导航栏、通知条等场景。