CSS实现的Marquee无法完整滚动全部内容的问题求助

问题原因 #

当前代码里，p.duck作为块级元素，宽度被限制为容器.pizza的宽度，动画的translate(-100%, 0)仅会向左移动容器宽度的距离，但实际内容总宽度远大于容器宽度，导致仅滚动部分内容就触发动画重置，蓝色文本段无法进入视野。

解决方案 #

调整滚动元素的显示属性，让动画位移基于内容实际宽度计算，确保完整滚动全部内容：

修改后的完整代码

HTML（无需改动）

<div class="pizza">
    <p class="duck"><span class="red">Start Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut sed placeat aperiam quod nostrum itaque blanditiis soluta! Aliquid fuga molestias aut magni, pariatur doloremque, voluptas ipsa nobis ipsum voluptatibus end.</span> <span class="green">Start Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut sed placeat aperiam quod nostrum itaque blanditiis soluta! Aliquid fuga molestias aut magni, pariatur doloremque, voluptas ipsa nobis ipsum voluptatibus end.</span> <span class="blue">Start Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut sed placeat aperiam quod nostrum itaque blanditiis soluta! Aliquid fuga molestias aut magni, pariatur doloremque, voluptas ipsa nobis ipsum voluptatibus end.</span>.</p>
</div>

CSS（关键修改标注）

.green {
    color: green;
}

.red {
    color: red;
}

.blue {
    color: blue;
}

.pizza {
    line-height: 60px;
    font-size: 16px;
    overflow: hidden;
    position: relative;
    white-space: nowrap;
    width: 100%; /* 明确容器宽度 */
}

p.duck {
    display: inline-block; /* 核心修改：让元素宽度由内容决定，不再受容器限制 */
    margin: 0;
    animation: scroll-left 20s linear infinite;
}

@keyframes scroll-left {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(-100%, 0); /* 此时-100%基于内容总宽度计算，确保完整滚动 */
    }
}

p.duck:hover {
    animation-play-state: paused;
}

原理说明 #

• display: inline-block使p.duck的宽度自适应内容长度，而非继承容器的100%宽度。
• 动画的translate(-100%, 0)现在会基于内容总宽度计算位移，让整个内容从容器右侧滚动进入，完全滚出左侧后才重置动画，蓝色文本段即可完整展示。

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