CSS 实现文字超出文本框滚动播放，滚动到头从头开始

可以通过以下 CSS 样式实现文字超出文本框长度时的滚动播放效果，并且滚动到头后从头开始：

.container {
  overflow: hidden; /* 隐藏超出部分 */
  white-space: nowrap; /* 文本不换行 */
}

.text {
  display: inline-block; /* 行内块元素 */
  animation: marquee 5s linear infinite; /* 滚动动画 */
}

@keyframes marquee {
  0% {
    transform: translateX(0); /* 初始位置 */
  }
  100% {
    transform: translateX(-100%); /* 滚动到尽头 */
  }
}

其中，.container 为包含文本的父元素，.text 为文本元素，animation 属性为动画属性，marquee 为动画名称，5s 为动画时长，linear 为动画速度曲线，infinite 为动画循环次数，@keyframes 为定义动画的关键帧。在 @keyframes 中，0% 表示动画开始时的状态，100% 表示动画结束时的状态，transform 属性为元素的变换属性，translateX 表示元素在 X 轴方向的平移距离，负值表示向左移动。