JavaScript实现一行文字水平滚动

可以使用CSS3的动画属性实现一行文字水平滚动。具体实现如下：

HTML代码：

<div class="scrolling-text">这是一行文字水平滚动的效果</div>

CSS代码：

.scrolling-text {
    white-space: nowrap; /* 禁止文字换行 */
    overflow: hidden; /* 隐藏超出容器的文字 */
    animation: scrolling 20s linear infinite; /* 动画属性，20秒线性滚动，无限循环 */
}

@keyframes scrolling {
    0% {
        transform: translateX(0); /* 初始位置 */
    }
    100% {
        transform: translateX(-100%); /* 滚动到最左边 */
    }
}

解释一下：

1. `white-space: nowrap` 禁止文字换行，保证文字在一行内显示。

2. `overflow: hidden` 隐藏超出容器的文字，保证文字只在容器内滚动。

3. `animation: scrolling 20s linear infinite` 动画属性，设置动画名称为 `scrolling`，20秒线性滚动，无限循环。

4. `@keyframes scrolling` 定义动画 keyframes，包含两个关键帧，0% 代表初始位置，100% 代表滚动到最左边。使用 `transform: translateX()` 实现水平位移。

通过以上方式，就可以实现一行文字水平滚动的效果了。