CSS动画如何实现导航栏文字滚动_transform translateX @keyframes控制-css教程-PHP中文网

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

P粉602998670

发布： 2025-11-30 19:12:07

原创

584人浏览过

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

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

导航栏文字滚动效果可以通过 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 从右到左移动文字：

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

Riffusion

AI生成不同风格的音乐

查看详情

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

登录后复制

说明：