css中的左右滚动不停 |css svg图片怎么用

.scroll {
white-space: nowrap;
overflow: hidden;
animation: scroll 10s linear infinite;
}
@keyframes scroll {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-100%);
}
}

以上代码中，首先通过设置white-space为nowrap，使得文字不会自动换行。然后通过overflow:hidden属性隐藏多余的部分，使得文字只能在该元素的固定区域内显示。接着，通过animation属性，设置动画效果，即scroll10s linear infinite，表示以线性的方式，每10秒无限循环滚动。最后，在@keyframes中定义滚动的动画效果，从0%到100%平移距离为-100%。

在HTML中，仅需将需要滚动的文字包裹在一个指定class的div中，如下所示：

<div class="scroll">
这里是需要左右滚动的文字
</div>

这样即可轻松实现左右不停滚动的效果。