通过CSS的@keyframes和transform:translateX()实现文字滚动，首先构建HTML结构，再设置容器溢出隐藏与文字不换行，利用关键帧定义从右到左的位移动画，使文字匀速无限循环滚动，适用于导航栏或通知条，可通过调整时间、性能优化及双倍文字拼接提升效果。
导航栏文字滚动效果可以通过 CSS 的 @keyframes 和 transform: translateX() 实现，常用于展示连续滚动的标语、通知或标签。下面介绍具体实现方法。
1. 基本结构（HTML）
先搭建简单的 HTML 结构，包含一个容器和要滚动的文字内容：
<div class="scroll-container">
<div class="scroll-text">
欢迎访问我们的网站 - 最新优惠不断 - 点击了解更多 - 提供优质服务
</div>
</div>
2. 样式布局（CSS）
设置容器为横向溢出隐藏，内部文字超出宽度并允许滚动：
.scroll-container {
white-space: nowrap; /* 防止换行 */
overflow: hidden; /* 隐藏溢出部分 */
width: 100%;
background-color: #f0f0f0;
padding: 10px 0;
}
<p>.scroll-text {
display: inline-block; /<em> 使 transform 生效 </em>/
font-size: 18px;
color: #333;
}</p>3. 使用 @keyframes 定义滚动动画
通过 @keyframes 控制 translateX 从右到左移动文字：
立即学习“前端免费学习笔记（深入）”；
@keyframes scrollText {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
<p>.scroll-text {
animation: scrollText 15s linear infinite;
}</p>说明：
- translateX(100%)：开始时文字完全在容器右侧外
- translateX(-100%)：结束时文字完全移到左侧外
- linear：匀速滚动
- infinite：无限循环
- 15s：滚动周期，可根据文字长度调整
4. 优化体验建议
为了让滚动更自然，可以考虑以下优化：
- 若文字较长，可适当增加动画时间，避免太快
- 使用
will-change: transform提升动画性能 - 在移动端可添加媒体查询控制是否启用动画
- 若需无缝滚动，可用双倍文字拼接并调整位移范围
基本上就这些。用 @keyframes 配合 transform: translateX 实现文字滚动，高效且兼容性好，适合用在导航栏、通知条等场景。
