将Marquee集成至AB标题及CSS滚动字幕问题咨询

下面是针对你遇到的两个问题的修复代码及说明：

修改后的完整代码 #

CSS #

.marquee {
    background-color: antiquewhite;
    width: 150px;
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    align-items: center;
    min-height: 60px;
}

.marquee span {
    font-size: 40px;
    position: relative;
    left: 100%;
    animation: marquee 4s linear infinite;
    margin-right: 20px;
}

.marquee:hover span {
    animation-play-state: paused;
}

.marquee span:nth-child(1) {
    animation-delay: 0s;
}
.marquee span:nth-child(2) {
    animation-delay: 1.2s;
}
.marquee span:nth-child(3) {
    animation-delay: 2.4s;
}
.marquee span:nth-child(4) {
    animation-delay: 3.6s;
}
.marquee span:nth-child(5) {
    animation-delay: 4.8s;
}

@keyframes marquee {
    0% { left: 100%; }
    100% { left: calc(-100% - 20px); }
}

HTML #

<p class="marquee">
    <span>this is a</span>
    <span>simple marquee</span>
    <span>using css</span>
    <span>using css</span>
    <span>simple marquee</span>
</p>

问题解决说明 #

1. 容器高度与文本垂直居中 #

• 把.marquee的display改为flex，搭配align-items: center，无需复杂计算就能实现文本垂直居中，兼容性和稳定性更好。
• 通过min-height设置容器最小高度，你可以根据字体大小调整这个值，既保证文本垂直居中，又能让容器有合适的上下留白；如果想要容器高度完全贴合文本，直接移除min-height即可。

2. 文字重叠与流畅循环 #

• 给每个span添加margin-right，避免滚动时相邻文本直接粘连重叠。
• 延长动画时长至4秒，让文本滚动速度更平缓，减少拥挤感。
• 调整动画延迟间隔为1.2秒，确保前一个文本即将完全移出容器时，下一个文本才开始入场，实现流畅衔接。
• 修改动画关键帧的终点为calc(-100% - 20px)，把span的右侧间距计算进去，确保文本完全移出容器后再进入循环，避免残留部分导致重叠。

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