简单实现文字滚动效果-CSS版本

/* 设置滚动容器 */
.scroll-text-container {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
}
 
/* 设置滚动文本 */
.scroll-text {
  display: inline-block;
  padding-left: 100%;
  animation: scroll-left 10s linear infinite;
}
 
/* 定义关键帧动画 */
@keyframes scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
 
/* 示例用法 */
<div class="scroll-text-container">
  <div class="scroll-text">这是一个滚动的文本效果 - 欢迎访问我们的网站</div>
</div>

这段代码定义了一个简单的文字滚动效果。.scroll-text-container 是一个容器，它设置了滚动的宽度和滚动的基本属性。.scroll-text 是滚动的文本，通过设置 padding-left 为 100%，文本会比容器宽度多出一倍的空间，从而实现循环滚动的效果。@keyframes scroll-left 定义了从左至右的平滑滚动动画。