如何在HTML中实现连续无断点、无限循环的跑马灯文字效果

问题原因 #

• 动画名不匹配：你CSS中@keyframes定义的动画名为marquee2，但.marquee__inner2里调用动画时写的是marquee，导致自定义的滚动规则没有生效
• 核心逻辑缺失：无限连续滚动的前提是「完整内容至少重复2份」，滚动到第二份的起始位置时直接跳回第一份起始位置，视觉上就不会有断层。你当前只有一份内容，滚动完就出现空白区域，自然会有重启断层。

修改后可运行代码 #

HTML代码 #

<div class="bg33">
    <div class="marquee2" id="showScroll2">
        <div class="marquee__inner2" aria-hidden="true">
            <!-- 原内容 -->
            <span>HTML</span>
            <span>CSS</span>
            <span>SASS</span>
            <span>JAVASCRIPT</span>
            <span>JQUERY</span>
            <span>VUE.JS</span>
            <span>PYTHON</span>
            <span>JAVA</span>
            <span>REACT</span>
            <span>GIT</span>
            <span>NPM</span>
            <span>RSTUDIO</span>
            <span>JIRA</span>
            <span>AGILE</span>
            <span>FIGMA</span>
            <span>PS</span>
            <span>ILLUSTRATOR</span>
            <span>BALSAMIQ</span>
            <!-- 复制一份完全相同的内容，用于无缝衔接 -->
            <span>HTML</span>
            <span>CSS</span>
            <span>SASS</span>
            <span>JAVASCRIPT</span>
            <span>JQUERY</span>
            <span>VUE.JS</span>
            <span>PYTHON</span>
            <span>JAVA</span>
            <span>REACT</span>
            <span>GIT</span>
            <span>NPM</span>
            <span>RSTUDIO</span>
            <span>JIRA</span>
            <span>AGILE</span>
            <span>FIGMA</span>
            <span>PS</span>
            <span>ILLUSTRATOR</span>
            <span>BALSAMIQ</span>
        </div>
    </div>
</div>

CSS代码 #

.marquee2 {
    position: relative;
    overflow: hidden;
}

.marquee__inner2 {
    width: fit-content;
    display: flex;
    position: relative;
    /* 修正动画名，和@keyframes定义的名称一致 */
    animation: marquee2 12s linear infinite;
    /* 修正属性值，play是错误值，正确值为running */
    animation-play-state: running;
    color: #1a1a1a;
    font-family: 'Noctis Bold';
}

.marquee2 span {
    font-size: 5vh;
    padding: 0 2vw;
    /* 禁止文字折行，避免内容挤压变形 */
    white-space: nowrap;
}

.marquee2:hover .marquee__inner2 {
    animation-play-state: paused;
}

@keyframes marquee2 {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        /* 两份内容总宽度是原内容的2倍，移动-50%刚好走完第一份内容，和第二份起始位置无缝衔接 */
        transform: translate3d(-50%, 0, 0);
    }
}

补充说明 #

如果要调整滚动速度，直接修改动画的12s参数即可，数值越小滚动越快，数值越大滚动越慢。该方案自适应内容宽度，不需要手动计算偏移值，不同屏幕尺寸下都能保持连续滚动效果。

内容的提问来源于stack exchange，提问作者Isha