[分享]css不间断向左滚动代码

CSS不间断向左滚动是实现网页中滚动播放图像或文字的一种常用方法。下面介绍一种简单的方式：

.scroll {
    white-space: nowrap;
    overflow: hidden;
    animation: marquee 10s linear infinite;
}

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

首先，我们给需要滚动的元素添加一个class名为“.scroll”。

接着，我们使用“white-space: nowrap;”来取消文字换行，使元素里的内容横向排列并不会自动换行，这样我们的元素就可以不断地向左滚动。

然后，我们使用“overflow: hidden;”来隐藏元素内容滚动出元素的部分，且不显示滚动条。

最后，我们使用CSS动画“animation”来控制元素向左滚动播放的效果。我们定义一个名为“marquee”的动画，将元素从当前位置向左偏移100%（也就是元素的宽度）。

当浏览器加载这段代码时，元素就会自动向左无限循环滚动，直到停止播放。需要注意的是，我们使用“transform: translateX()”来操作滚动的元素，这个属性可以增加元素的性能。

总结一下，以上就是CSS不间断向左滚动的实现方法，大家可以根据自己的需求进行调整和改进。