css信息条滚动 |某个div 下的样式 css

/*CSS代码*/
.scroll {
width: 100%;
overflow: hidden;
white-space: nowrap;
}
.scroll span {
display: inline-block;
padding-left: 100%;
animation: marquee 15s linear infinite;
}
@keyframes marquee {
0% {
transform: translate(0,0);
}
100% {
transform: translate(-100%,0);
}
}

代码中，首先定义了一个类名为scroll的样式，该样式下的容器使用了overflow: hidden属性，将文字信息的超出部分隐藏。同时，也为了让文字能够以横向滚动的形式呈现，将white-space属性设置为nowrap。

接着，在span标签中，为文字信息指定了display: inline-block属性，让它能够占据一定的宽度，并且通过padding-left: 100%;来占据scroll容器的宽度，使得文字始终往左边移动。

最后，通过animation属性来设置滚动的时间、速度等参数，这里使用了marquee动画，它通过transform属性来改变文字元素的位置，从而产生滚动的效果。在keyframes中，定义了动画的开始位置和结束位置，从而实现了持续的滚动效果。

通过以上CSS代码的实现，可以轻松实现文字信息的滚动效果，让页面内容更生动、更有吸引力。