css 多个p标签的一行文字循环走马灯

如果您希望使用纯CSS实现多个p标签的文字在同一行内进行循环走马灯滚动，可以使用CSS动画和关键帧来实现。以下是一个示例代码：

<div class="marquee">
    <div class="marquee-content">
        <p>这是第一个需要滚动的文字</p>
        <p>这是第二个需要滚动的文字</p>
    </div>
</div>

.marquee {
    overflow: hidden;
    position: relative;
    white-space: nowrap;  /* 防止文字换行 */
}
.marquee-content {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    animation: marquee 10s linear infinite;
}
.marquee p {
    display: inline-block;
    margin: 0;
    padding: 0 20px;  /* 调整文字之间的间距 */
    line-height: 50px;  /* 调整文字垂直居中 */
}
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

这样，两个p标签内的文字就会在同一行内进行循环走马灯滚动。您可以根据需要调整文字之间的间距、滚动速度、动画方向等参数。