css3 跑马灯

#### 跑马灯动画效果

/* 使用@keyframes定义一个命名为marqueeAnimation的动画，使文本从右至左滚动 */
@keyframes marqueeAnimation {
    0% {
        transform: translateX(100%);   /* 起始状态，文本从容器的右边开始 */
    }
    100% {
        transform: translateX(-100%);  /* 结束状态，文本完全从容器的左边滚出 */
    }
}

/* 容器样式 */
.marquee-wrap {
    display: flex;            /* 使用flex布局以确保文本垂直居中 */
    background: #000;        /* 黑色背景 */
    height: 50px;            /* 容器高度 */
    line-height: 50px;       /* 使文本垂直居中 */
    color: #fff;             /* 文本颜色为白色 */
    overflow: hidden;        /* 隐藏超出容器的内容 */
}

/* 文本滚动样式 */
.marquee-content {
    width: 100%;             /* 文本容器宽度 */
    animation: marqueeAnimation 5s linear 0s infinite; /* 应用定义的跑马灯动画，持续时间为5秒，匀速，无延迟，循环播放 */
    overflow: hidden;        /* 隐藏超出的内容 */
}

HTML 结构

<section class="marquee-wrap">
    <section class="marquee-content">
        3232323323232332323233232323323232332323233232323323232332323233232323-----
    </section>
</section>

JavaScript 代码

  // 获取跑马灯内容元素
    let marqueeContent = document.getElementsByClassName('marquee-content')[0];
    // 动态设置跑马灯的动画持续时间
    marqueeContent.style.animationDuration =  3 * 0.2 + 10 + 's';

实现一个简单的跑马灯效果。当页面加载时，文本将开始从右至左滚动。