css实现文字自动滚动代码

CSS可以很方便地实现文字自动滚动，只需要利用CSS3的动画特性即可：

.scroll {
  overflow: hidden;
  animation: scroll 10s linear infinite;
}

@keyframes scroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}

首先，我们需要给需要自动滚动的文字容器添加一个固定的高度和overflow:hidden样式，以限制内容的显示范围。

然后在容器中定义一个animation属性，值为scroll，表示使用名为scroll的动画，动画执行时间设为10秒，动画轨迹为linear，无限循环。

接着，在css样式中定义scroll动画，使用@keyframes关键字指定动画关键帧，包括0%和100%两个状态。

0%状态下，文字垂直方向不偏移，transform的值为translateY(0)。

100%状态下，文字垂直方向上移，以容器高度为参考值，偏移量为-100%，transform的值为translateY(-100%)。

这样，文字就可以实现自动上下滚动了。