* {
    margin: 0;
    padding: 0;
}

.marquee-container {
    position: relative;
    width: 80%;
    height: 50px;
    margin: 0 auto;
    line-height: 50px;
    background-color: cadetblue;
    overflow: hidden;
}

.marquee-box {
    position: absolute;
    display: inline-block;
    color: #fff;
    white-space: nowrap;
    animation: marquee 5s linear infinite;
}

/* 如果是 PC 端，可能还需要一个鼠标移入时动画暂停的功能 */
.marquee-container:hover .marquee-box {
    animation-play-state: paused;
}

@keyframes marquee {
    0% {
        left: 100%;
    }
    100% {
        left: 0%;
        transform: translateX(-100%);
    }
}