CSS实现文字横向无限滚动效果

一、效果

二、核心：文字滚动效果样式

这部分是实现文字循环滚动的关键，分为容器和内容两部分：

1. 滚动容器样式

css 复制代码

.text-scroll-container {
  overflow: hidden;
  position: relative;
  white-space: nowrap;
  margin-bottom: 32px;
}

overflow: hidden：隐藏容器外的内容（核心！确保文字滚动到边缘后被截断，只显示容器内部分）

position: relative：为内部元素提供定位参考（虽然这里没直接用，但属于常规布局准备）

white-space: nowrap：强制文本在一行显示（关键！如果文字换行，就不会产生滚动效果）

margin-bottom: 32px：与下方内容保持距离

2. 滚动内容样式

css 复制代码

.text-scroll-content {
  display: inline-block;
  animation: scroll 15s linear infinite;
}
/* 无缝滚动的关键：复制一份文本 */
.text-scroll-content::after {
  content: attr(data-text);
  padding-left: 2rem;
}

display: inline-block：让内容作为行内块元素，能被动画平移（块级元素默认占满宽度，无法滚动）

animation: scroll 15s linear infinite：应用名为scroll的动画，持续 15 秒，匀速运动，无限循环

::after 伪元素：通过content: attr(data-text)复制了data-text属性中的文本（与原文本相同），实现 "无缝滚动" 的视觉效果（当原文本滚动到一半时，复制的文本刚好衔接上）

padding-left: 2rem：复制的文本与原文本之间留一定间距，避免重叠

3. 滚动动画定义

css 复制代码

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes scroll 定义动画关键帧：

- 0%（开始）：transform: translateX(0) → 文本在初始位置（不偏移）

- 100%（结束）：transform: translateX(-50%) → 文本向左偏移自身宽度的 50%

为什么是 - 50%？因为::after复制了一份文本，整个内容总长度是原文本的 2 倍，偏移 50% 刚好让复制的文本完全替代原文本位置，形成 "无限循环" 的错觉

三、示例卡片样式（展示不同滚动速度）

css 复制代码

.examples-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px) {
  .examples-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.example-card {
  background-color: #f9fafb;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}
.example-title {
  font-weight: 600;
  color: #4b5563;
  margin-bottom: 8px;
}
/* 不同速度的滚动示例 */
.example-2 .text-scroll-content {
  animation-duration: 20s; /* 中等速度（20秒滚完一次） */
}
.example-3 .text-scroll-content {
  animation-duration: 10s; /* 快速（10秒滚完一次） */
}

.examples-grid 使用网格布局展示多个示例，默认 1 列，屏幕宽度≥768px 时变为 2 列（响应式）

.example-card 定义示例卡片样式：浅灰背景、边框、圆角，内部留白

.example-title 示例标题样式：半粗体、灰色

通过animation-duration调整动画时长，实现不同滚动速度（数值越小，滚动越快）

总结核心原理

容器限制：overflow: hidden + white-space: nowrap 确保文本在固定宽度内不换行，超出部分隐藏

动画平移：通过@keyframes让文本向左平移，形成滚动效果

无缝循环：用::after复制一份文本，配合 50% 的偏移量，让复制文本在原文本滚出视野时刚好衔接，实现 "无限滚动" 的视觉效果

你可以通过修改animation-duration（速度）、容器宽度、文本样式等属性，轻松适配不同的设计需求。

四、附完整代码

`
文字循环滚动效果

xml 复制代码

<style>
    /* 基础样式 */
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
    
    body {
        font-family: 'Inter', system-ui, sans-serif;
        background-color: #f9fafb;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 16px;
        color: #1f2937;
    }
    
    .container {
        width: 100%;
        max-width: 640px;
        background-color: white;
        border-radius: 8px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        padding: 24px;
    }
    
    .title {
        font-size: 20px;
        font-weight: bold;
        color: #1f2937;
        margin-bottom: 24px;
        display: flex;
        align-items: center;
    }
    
    .title i {
        color: #3B82F6;
        margin-right: 8px;
    }
    
    /* 滚动文字核心样式 */
    .text-scroll-container {
        overflow: hidden;
        position: relative;
        white-space: nowrap;
        margin-bottom: 32px;
    }
    
    .example-1 {
        background-color: rgba(59, 130, 246, 0.1);
        border-radius: 9999px;
        padding: 12px 24px;
        border: 1px solid rgba(59, 130, 246, 0.2);
    }
    
    .text-scroll-content {
        display: inline-block;
        animation: scroll 15s linear infinite;
    }
    
    /* 为了实现无缝滚动，复制一份内容 */
    .text-scroll-content::after {
        content: attr(data-text);
        padding-left: 2rem;
    }
    
    @keyframes scroll {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(-50%);
        }
    }
    
    /* 示例网格布局 */
    .examples-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    @media (min-width: 768px) {
        .examples-grid {
            grid-template-columns: 1fr 1fr;
        }
    }
    
    .example-card {
        background-color: #f9fafb;
        padding: 16px;
        border-radius: 8px;
        border: 1px solid #e5e7eb;
    }
    
    .example-title {
        font-weight: 600;
        color: #4b5563;
        margin-bottom: 8px;
    }
    
    .example-2 .text-scroll-container,
    .example-3 .text-scroll-container {
        border-radius: 6px;
        border: 1px solid #d1d5db;
        padding: 8px;
        height: 40px;
        display: flex;
        align-items: center;
    }
    
    .example-2 .text-scroll-content {
        color: #4b5563;
        animation-duration: 20s;
    }
    
    .example-3 .text-scroll-content {
        color: #4b5563;
        animation-duration: 10s;
    }
    
    .primary-text {
        color: #3B82F6;
        font-weight: 500;
    }
</style>

文字滚动展示示例

xml 复制代码

    <!-- 滚动文字容器 -->
    <div class="text-scroll-container example-1">
        <div class="text-scroll-content primary-text" 
             data-text="这是一段需要在有限宽度内循环滚动显示的文本内容，当文本长度超过容器宽度时会自动滚动展示全部内容。">
            这是一段需要在有限宽度内循环滚动显示的文本内容，当文本长度超过容器宽度时会自动滚动展示全部内容。
        </div>
    </div>
    
    <div class="examples-grid">
        <div class="example-card example-2">
            <h3 class="example-title">中等速度滚动</h3>
            <div class="text-scroll-container">
                <div class="text-scroll-content" 
                     data-text="这是中等速度的滚动文本示例 - 适合大多数场景使用">
                    这是中等速度的滚动文本示例 - 适合大多数场景使用
                </div>
            </div>
        </div>
        
        <div class="example-card example-3">
            <h3 class="example-title">快速滚动</h3>
            <div class="text-scroll-container">
                <div class="text-scroll-content" 
                     data-text="这是快速滚动的文本示例 - 适合简短信息展示">
                    这是快速滚动的文本示例 - 适合简短信息展示
                </div>
            </div>
        </div>
    </div>
</div>