CSS实现文字向左向右滚动

1.创建盒子容器

  <div class="box">
    <p class="text">克劳斯·莫瑟爵士曾经提到过，教育需要花费钱，而无知也是一样。这启发了我， 总结的来说， 问题的关键究竟为何？ 每个人都不得不面对这些问题。 在面对这种问题时， 黑塞说过一句富有哲理的话，有勇气承担命运这才是英雄好汉。这不禁令我深思。 一天掉多少根头发因何而发生？ 了解清楚一天掉多少根头发到底是一种怎么样的存在，是解决一切问题的关键。 一般来讲，我们都必须务必慎重的考虑考虑。 所谓一天掉多少根头发，关键是一天掉多少根头发需要如何写。 既然如何， 我们不得不面对一个非常尴尬的事实，那就是， 既然如何， 本人也是经过了深思熟虑，在每个日日夜夜思考这个问题。 问题的关键究竟为何？ 问题的关键究竟为何。</p>
  </div>

2.定义文字滚动动画

@keyframes textRoll {
  0% {
    /* 位移文字盒子的宽度，把文字移出盒子 */
    /* 100% ~ -100% 文字向左移动 */
    /* -100% ~ 100% 文字向右移动 */
    transform: translateX(100%);
  }

  100% {
    transform: translateX(-100%);
  }
}

3.定义CSS样式

.box {
  width: max-content; // 这里一定要是max-content
  height: 50px;
  background-color: red;
  overflow: hidden;
}

.text {
  animation: textRoll linear 10s infinite;  // 文字滚动动画
  width: 300px;
  white-space: nowrap; // 文字不换行
}